{"componentChunkName":"component---src-templates-post-js","path":"/blog/k-vrc-vector-cozmo","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🤖 机器人眼睛动画的实现","tips":[],"categories":["code"],"datetime":"2021-09-03 16:34:10","noFooter":false,"description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","plainTextDescription":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='202'%3e%3cpath%20d='M8%2022v51l1%2050h384V21H201L8%2022'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.976627712854758,"src":"/static/c289618fe7e452b4133a03b30b5de03a/35fc7/banner.png","srcSet":"/static/c289618fe7e452b4133a03b30b5de03a/82675/banner.png 500w,\n/static/c289618fe7e452b4133a03b30b5de03a/fef60/banner.png 1000w,\n/static/c289618fe7e452b4133a03b30b5de03a/35fc7/banner.png 2000w,\n/static/c289618fe7e452b4133a03b30b5de03a/7cf47/banner.png 2368w","srcWebp":"/static/c289618fe7e452b4133a03b30b5de03a/e1a1e/banner.webp","srcSetWebp":"/static/c289618fe7e452b4133a03b30b5de03a/7fe04/banner.webp 500w,\n/static/c289618fe7e452b4133a03b30b5de03a/d619e/banner.webp 1000w,\n/static/c289618fe7e452b4133a03b30b5de03a/e1a1e/banner.webp 2000w,\n/static/c289618fe7e452b4133a03b30b5de03a/71fe7/banner.webp 2368w","sizes":"(max-width: 2000px) 100vw, 2000px"}}},"bannerCredit":null,"slug":"/blog/k-vrc-vector-cozmo","tags":["整理","思考"]},"headings":[{"value":"〇、脑袋里甩不掉的想法 💡","depth":2},{"value":"一、 Anki 的 Vector 怎么实现的？ ❔","depth":2},{"value":"二、自己原来的思路 🤔","depth":2},{"value":"三、官方开源？！ 💽","depth":2},{"value":"四、接下来的实现路线 💭","depth":2},{"value":"1 粗略","depth":3},{"value":"2 渲染看看","depth":3},{"value":"3 换个主场","depth":3},{"value":"五、他们怎么做的？ 🔍","depth":2},{"value":"六、只关心核心绘制参数的意义","depth":2},{"value":"1 猜参数到调参数","depth":3},{"value":"2 先跑起来是一个程序很不错的开始","depth":3},{"value":"七、最终效果 🎉","depth":2},{"value":"八、动起来 🕹","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"k-vrc-vector-cozmo\",\n  \"title\": \"🤖 机器人眼睛动画的实现\",\n  \"date\": \"2021-09-03 16:34:10\",\n  \"author\": \"Ubug\",\n  \"description\": \"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"整理\", \"思考\"],\n  \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u4ECE\\u8111\\u888B\\u91CC\\u6709\\u4E00\\u4E2A\\u60F3\\u6CD5\\uFF0C\\u5230\\u8C03\\u7814\\u3001\\u9047\\u5230\\u74F6\\u9888\\u3001\\u627E\\u5230\\u7A81\\u7834\\u3001\\u8D70\\u5F2F\\u8DEF\\u3001\\u5B9E\\u73B0\\u8FD8\\u7B97\\u53EF\\u4EE5\\u7684\\u6548\\u679C\\uFF0C\\u6700\\u540E\\u5B8C\\u5584\\u5230\\u5B8C\\u7F8E\\u3002\\u5C31\\u50CF\\u5927\\u90E8\\u5206\\u7684\\u5DE5\\u4F5C\\u4E00\\u6837\\uFF0C\\u6BCF\\u4E00\\u6B65\\u90FD\\u597D\\u50CF\\u90FD\\u4E0D\\u592A\\u987A\\u5229\\uFF0C\\u4F46\\u662F\\u6700\\u540E\\u8FD8\\u662F\\u80FD\\u591F\\u628A\\u95EE\\u9898\\u89E3\\u51B3\\u3002\")), mdx(\"hr\", null), mdx(\"video\", {\n    controls: true,\n    style: {\n      maxWidth: '100%'\n    },\n    src: \"/my-vector-99e5425ec085d7ad0dd149de57843425.mp4\"\n  }), mdx(\"h2\", null, \"\\u3007\\u3001\\u8111\\u888B\\u91CC\\u7529\\u4E0D\\u6389\\u7684\\u60F3\\u6CD5 \\uD83D\\uDCA1\"), mdx(\"p\", null, \"\\u5468\\u672B\\u8865\\u4E86\\u7231\\u6B7B\\u673A\\uFF0C\\u4E00\\u53D1\\u4E0D\\u53EF\\u6536\\u62FE\\uFF0C\\u7B2C\\u4E00\\u5B63\\u7B2C\\u4E8C\\u96C6\\u7684\\u4E09\\u4E2A\\u673A\\u5668\\u4EBA\\u8BA9\\u6211\\u89C9\\u5F97\\u7279\\u522B\\u6709\\u8DA3\\uFF0C\\u5C24\\u5176\\u662F\\u5176\\u4E2D\\u4E00\\u4E2A\\u8868\\u60C5\\u4E30\\u5BCC\\uFF0C\\u4E8E\\u662F\\u7279\\u522B\\u60F3\\u6DF1\\u5165\\u4E86\\u89E3\\u3002\\u5230\\u7231\\u6B7B\\u673A\\u7684 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://lovedeathrobots.fandom.com/\"\n  }, \"Wiki\"), \" \\u4E0A\\uFF0C\\u77E5\\u9053\\u90A3\\u4E2A\\u673A\\u5668\\u662F\\u53EB \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://lovedeathrobots.fandom.com/wiki/K-VRC\"\n  }, \"k-vrc\"), \"\\u3002\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/k-vrc-8a4c1668ff3cf1476d93131541f81a5a.webp\",\n    \"alt\": \"K-VRC\"\n  })), mdx(\"p\", null, \"\\u53C8\\u60F3\\u5230\\u4E4B\\u524D\\u4E86\\u89E3\\u5230\\u7684\\u4E00\\u4E2A\\u5C0F\\u673A\\u5668\\u4EBA\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.digitaldreamlabs.com/pages/meet-vector\"\n  }, \"vector/cozmo\"), \"\\uFF0C\\u5F88\\u597D\\u73A9\\uFF0C\\u4F46\\u662F\\u4EF7\\u683C\\u3001\\u672C\\u5730\\u5316\\u4E0D\\u592A\\u53CB\\u597D\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/vector-helpful-rain-1a705bca905571975b5bf1dce91702c8.gif\",\n    \"alt\": \"vector\"\n  })), mdx(\"p\", null, \"\\u53C8\\u53C8\\u60F3\\u5230\\u4E86\\u851A\\u6765\\u6C7D\\u8F66\\u7684 Nomi:\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/item-6-icon-5-0a5263f4176a4e508cb7904ba9dc20b2.webp\",\n    \"alt\": \"Nomi\"\n  })), mdx(\"p\", null, \"\\u611F\\u89C9\\u8868\\u60C5\\u8FD9\\u4E2A\\u4E1C\\u897F\\u7279\\u522B\\u6709\\u8DA3\\uFF0C\\u81EA\\u5DF1\\u5982\\u679C\\u5B9E\\u73B0\\u4E00\\u4E2A\\u611F\\u89C9\\u4F1A\\u633A\\u6709\\u610F\\u601D\\u7684\\uFF0C\\u5FC3\\u60F3\\u504C\\u5927\\u7684\\u4E92\\u8054\\u7F51\\u4E16\\u754C\\u603B\\u8BE5\\u6709\\u7C7B\\u4F3C\\u7684\\u9879\\u76EE\\u5427\\u3002\"), mdx(\"p\", null, \"\\u7B80\\u5355\\u641C\\u4E86\\u4E00\\u4E0B\\uFF0C\\u5173\\u952E\\u8BCD\\u4ECE \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"robot face\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"robot emotion\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"robot expressions\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lcd-like robot face\"), \" \\u641C\\u4E86\\u4E00\\u5927\\u5806\\uFF0C\\u53EF\\u4EE5\\u8BF4\\u53EF\\u4EE5\\u7528\\u7684\\u4EE3\\u7801\\u3001\\u77E2\\u91CF\\u56FE\\u7B49\\u4E1C\\u897F\\u6CA1\\u6709\\u80FD\\u8BA9\\u6211\\u76F4\\u63A5\\u4F7F\\u7528\\u7684\\uFF0C\\u6709\\u7684\\u8BDD\\u4E5F\\u662F\\u6781\\u5176\\u7C97\\u7CD9\\uFF0C\\u6240\\u4EE5\\u968F\\u4FBF\\u505A\\u4E00\\u4E2A\\u73A9\\u73A9\\u7684\\u60F3\\u6CD5\\u9010\\u6E10\\u63A5\\u53D7\\u4E86\\u9700\\u8981\\u505A\\u70B9\\u810F\\u6D3B\\u7D2F\\u6D3B\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001 Anki \\u7684 Vector \\u600E\\u4E48\\u5B9E\\u73B0\\u7684\\uFF1F \\u2754\"), mdx(\"p\", null, \"\\u51B3\\u5B9A\\u597D\\u597D\\u8C03\\u7814\\u4E0B anki \\u7684\\u76F8\\u5173\\u65B9\\u6848\\u4F5C\\u4E3A\\u7A81\\u7834\\u53E3\\uFF0C\\u8FD8\\u662F\\u6BD4 Nomi \\u8FD9\\u79CD\\u8D44\\u6599\\u90FD\\u5F88\\u5C11\\u7684\\u9879\\u76EE\\u548C K-VRC \\u90A3\\u79CD\\u7EAF\\u5F71\\u89C6\\u5B9E\\u73B0\\u7684\\u9760\\u8C31\\u70B9\\u7684\\uFF0C\\u6211\\u8FD8\\u771F\\u5C31\\u4E0D\\u4FE1\\u771F\\u5FC3\\u60F3\\u505A\\u7684\\u8FD9\\u4E2A\\u4E1C\\u897F\\u6CA1\\u529E\\u6CD5\\u5B9E\\u73B0\\uFF1F\"), mdx(\"p\", null, \"\\u82B1\\u4E86\\u5927\\u529B\\u6C14\\u627E\\u5230\\u7684\\u6700\\u9AD8\\u5206\\u8FA8\\u7387\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/cozmo-b0b4fc7d9fe12c2b3495cfb6ac678a8b.webp\",\n    \"alt\": \"cozmo\"\n  })), mdx(\"p\", null, \"\\u8868\\u60C5\\u5341\\u5206\\u4E30\\u5BCC\"), mdx(\"p\", null, \"Vector \\u793E\\u533A\\u63D0\\u4E86\\u5F88\\u591A\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://randym32.github.io/Anki.Vector.Documentation/tools/Eye%20animation.html\"\n  }, \"https://randym32.github.io/Anki.Vector.Documentation/tools/Eye%20animation.html\"), \" \\u76F8\\u5173\\u5468\\u8FB9\\u77E5\\u8BC6\\uFF0C\\u4EE5\\u4E3A\\u4F1A\\u6709\\u70B9\\u4EC0\\u4E48\\u6709\\u7528\\u7684\\uFF0C\\u4F46\\u662F\\u4E00\\u70B9\\u90FD\\u6CA1\\uFF0C\\u53EA\\u6709\\u4E00\\u4E9B\\u65B0\\u95FB\\u7A3F\\u4E2D\\u7684\\u914D\\u56FE\\u3002\\u627E\\u5230\\u4E86\\u4E00\\u4E9B SDK\\uFF0C\\u4E5F\\u53EA\\u662F\\u53EF\\u4EE5\\u5728\\u5C4F\\u5E55\\u4E0A\\u663E\\u793A\\u4EC0\\u4E48\\u3002\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/CozmoAnimation-tool2-55324cfc0ca6c7e4da31c99d8a416ca5.webp\",\n    \"alt\": null\n  }), \"\\n\", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/VectorAnimation-tool-3430a530998048f91f2eca9cab928025.webp\",\n    \"alt\": null\n  }), \"\\n\", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/VectorAnimation-tool2-779253d94a00040f371db371be45dc22.webp\",\n    \"alt\": null\n  })), mdx(\"p\", null, \"\\u4ECE\\u627E\\u5230\\u7684\\u5DE5\\u7A0B\\u5E08\\u7684\\u56FE\\u4E5F\\u4F50\\u8BC1\\u4E86\\uFF0C\\u786E\\u5B9E\\u7528\\u7684\\u8FD9\\u4E9B\\u5DE5\\u5177\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/3061276-inline-12-meet-cozmo-ankis-pixar-inspired-ai-powered-432edeed213c15e1083250dff822bd95.webp\",\n    \"alt\": null\n  })), mdx(\"p\", null, \"\\u65E9\\u671F\\u4ED6\\u4EEC\\u7684\\u8BBE\\u8BA1\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/Cozmo-eyes_0-0b4d1017184ab18205eaaa8101b82d5d.webp\",\n    \"alt\": null\n  })), mdx(\"p\", null, \"\\u624B\\u5199\\u7684\\u5F88\\u591A\\u573A\\u666F\\u548C\\u811A\\u672C\\u8BBE\\u8BA1\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/Cozmo_notes-sketches_0-c4b2483a2a5fa97b8ff786baa10ba4a6.webp\",\n    \"alt\": null\n  })), mdx(\"p\", null, \"\\u8FD8\\u627E\\u5230\\u4E86\\u4ED6\\u4EEC\\u516C\\u53F8\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"joysticksnsliders\"), \" \\u4E4B\\u7C7B\\u7684 AE \\u5DE5\\u5177\\uFF1F\\u6A21\\u62DF\\u505A\\u7684\\u4E00\\u4E2A\\u6559\\u5B66\\u89C6\\u9891\\uFF0C\\u5B9E\\u73B0\\u52A8\\u6001\\u53EF\\u8C03\\u7684\\u8868\\u60C5\\uFF08\\u548C\\u6211\\u4EEC\\u8981\\u627E\\u7684\\u4EE3\\u7801\\u7EA7\\u5B9E\\u73B0\\u5B8C\\u5168\\u4E0D\\u540C\\uFF09\\uFF1A\"), mdx(\"video\", {\n    controls: true,\n    style: {\n      maxWidth: '100%'\n    },\n    src: \"/G-aTsq5yfbncQ3EV-12f44018870f0f863acf393bb3f52445.mp4\"\n  }), mdx(\"p\", null, \"\\u7ED3\\u8BBA\\u5C31\\u662F\\uFF1A\"), mdx(\"p\", null, \"\\u4ECE\\u5404\\u79CD\\u62FC\\u51D1\\u7684\\u77E5\\u8BC6\\u788E\\u7247\\u4E2D\\u4E86\\u89E3\\u5230\\uFF0C\\u4ED6\\u4EEC\\u6709\\u6765\\u81EA\\u76AE\\u514B\\u65AF\\u3001\\u68A6\\u5DE5\\u5382\\u4E13\\u95E8\\u7684\\u52A8\\u753B\\u56E2\\u961F\\uFF0C\\u505A\\u4E86\\u4E0A\\u5343\\u4E2A\\u9884\\u8BBE\\u573A\\u666F\\uFF08\\u770B\\u5230\\u8FD9\\u4E2A\\u6587\\u5B57\\u7684\\u65F6\\u5019\\u89C9\\u5F97\\u6709\\u70B9\\u5938\\u5F20\\uFF0C\\u4F46\\u662F\\u771F\\u5B9E\\u770B\\u5230 1186 \\u4E2A\\u52A8\\u753B\\u6587\\u4EF6\\u7684\\u65F6\\u5019\\uFF0C\\u5185\\u5FC3\\u53EA\\u6709\\u656C\\u4EF0\\u4E86\\uFF09\\uFF0C\\u5404\\u79CD\\u5404\\u6837\\u7684\\u8868\\u60C5\\u3002\\u4E5F\\u5C31\\u662F\\u8BF4\\u90A3\\u4E9B\\u975E\\u5E38\\u597D\\u73A9\\u7684\\u8868\\u60C5\\u548C\\u53CD\\u5E94\\uFF0C\\u5176\\u5B9E\\u90FD\\u662F\\u9884\\u8BBE\\u7684\\u6574\\u5957\\u52A8\\u4F5C\\uFF0C\\u786E\\u5B9E\\u6709 AI \\u76F8\\u5173\\u7684\\u4E1C\\u897F\\u89E6\\u53D1\\u8FD9\\u4E9B\\u4E00\\u4E32\\u7684\\u52A8\\u4F5C\\u3002\\u5F00\\u53D1\\u52A8\\u753B\\u7528\\u7684\\u662F maya\\uFF0C\\u6709\\u4E13\\u95E8\\u7684 GUI \\u7684\\u8868\\u60C5\\u63A7\\u5236\\u5DE5\\u5177\\u3002\"), mdx(\"p\", null, \"Vector \\u7684\\u8868\\u60C5\\u4E0D\\u662F\\u968F\\u673A\\u7684\\uFF0C\\u4E5F\\u4E0D\\u662F\\u7B80\\u5355\\u51E0\\u4E2A\\u60C5\\u7EEA\\u8868\\u60C5\\u7684\\u52A0\\u6743\\u7EC4\\u5408\\uFF0C\\u662F\\u6839\\u636E\\u5404\\u79CD\\u6545\\u4E8B\\u60C5\\u8282\\u7F16\\u6392\\u5B9E\\u73B0\\u7684\\u4E00\\u4E2A\\u4E2A\\u8868\\u60C5\\u5E27\\uFF0C\\u624B\\u52A8\\u590D\\u523B\\u8FD9\\u4E2A\\u80FD\\u529B\\u7684\\u6210\\u672C\\u5B9E\\u5728\\u662F\\u592A\\u9AD8\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u90FD\\u662F\\u6211\\u5728\\u611F\\u5174\\u8DA3\\u8C03\\u7814\\u8FC7\\u7A0B\\u4E2D\\u67E5\\u5230\\u7684\\u8D44\\u6599\\u5565\\u7684\\uFF0C\\u5F88\\u6709\\u9650\\uFF0C\\u4E0D\\u8FC7\\u5DF2\\u7ECF\\u5F00\\u59CB\\u60F3\\u4E0A\\u624B\\u505A\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u81EA\\u5DF1\\u539F\\u6765\\u7684\\u601D\\u8DEF \\uD83E\\uDD14\"), mdx(\"p\", null, \"\\u5728\\u6CA1\\u6DF1\\u5165\\u4E86\\u89E3\\u4E4B\\u524D\\uFF0C\\u6211\\u7684\\u8BA1\\u5212\\u662F\\u5927\\u6982\\u505A\\u4E00\\u4E2A\\u773C\\u775B\\u7684\\u5F62\\u72B6\\uFF0C\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u60C5\\u7EEA\\u5B9E\\u73B0\\u4E0D\\u540C\\u7684\\u5F62\\u72B6\\uFF0C\\u7136\\u540E\\u624B\\u52A8\\u5207\\u6362\\u60C5\\u7EEA\\u5373\\u53EF\\u5B9E\\u73B0\\u4E0D\\u540C\\u7684\\u8868\\u60C5\\uFF0C\\u9876\\u591A\\u5728\\u5207\\u6362\\u7684\\u65F6\\u5019\\u505A\\u70B9\\u8865\\u95F4\\u52A8\\u753B\\u3002\"), mdx(\"p\", null, \"\\u7B80\\u5355\\u641C\\u4E86\\u4E0B\\uFF0C\\u5F3A\\u70C8\\u5EFA\\u8BAE\\u770B\\u4E0B\\u8FD9\\u4E2A\\u7F51\\u9875\\uFF0C\\u80FD\\u591F\\u544A\\u8BC9\\u4F60\\u634F\\u4EBA\\u7684\\u4E1A\\u52A1\\u80FD\\u591F\\u505A\\u7684\\u591A\\u8BE6\\u7EC6\\uFF0818y+\\uFF09\\uFF1A\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://pochi.wiki.fc2.com/wiki/%E6%A9%9F%E8%83%BD%E7%B4%B9%E4%BB%8B%2F%E5%AE%B9%E5%A7%BF%E3%82%BF%E3%83%96\"\n  }, \"http://pochi.wiki.fc2.com/wiki/%E6%A9%9F%E8%83%BD%E7%B4%B9%E4%BB%8B%2F%E5%AE%B9%E5%A7%BF%E3%82%BF%E3%83%96\")), mdx(\"p\", null, \"\\u91CC\\u9762\\u7684\\u773C\\u775B\\u5F62\\u72B6\\u4E0D\\u8003\\u8651\\u65B9\\u5411\\u548C\\u7728\\u773C\\uFF0C\\u6709 25 \\u79CD\\u4E2A\\u793A\\u4F8B\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/efb3a59f16c9b0351f76add68eef496f-a9c155e85cb3dcb5eaffe5f7ce30a814.webp\",\n    \"alt\": null\n  })), mdx(\"p\", null, \"\\u5634\\u578B\\u7684\\u533A\\u522B\\u751A\\u81F3\\u8FBE\\u5230\\u4E86 80 \\u79CD\\u3002\"), mdx(\"p\", null, \"\\u5982\\u679C\\u8981\\u5B9E\\u73B0\\u6BD4\\u8F83\\u4E30\\u5BCC\\u7684\\u8868\\u60C5\\uFF0C\\u8FBE\\u5230\\u7075\\u52A8\\u7684\\u611F\\u89C9\\uFF0C\\u80FD\\u591F\\u9884\\u6599\\u5230\\u80AF\\u5B9A\\u6709\\u592A\\u591A\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dirty work\"), \" \\u8981\\u505A\\u4E86\\uFF0C\\u66F4\\u4F55\\u51B5\\u6211\\u4E5F\\u4E0D\\u662F\\u5F88\\u61C2\\u753B\\u753B\\uFF0C\\u4F5C\\u4E3A\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"side project\"), \"\\uFF0C\\u5982\\u679C\\u8FD9\\u4E48\\u505A\\u7684\\u8BDD\\uFF0C\\u5927\\u6982\\u7387\\u662F\\u8981\\u70C2\\u5C3E\\uFF0C\\u548C\\u6211\\u90A3\\u4E9B\\u864E\\u5934\\u86C7\\u5C3E\\u7684\\u9879\\u76EE\\u4E00\\u8D77\\u843D\\u7070\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u8C03\\u7814\\u4E86\\u633A\\u4E45\\uFF0C\\u4E5F\\u4E00\\u76F4\\u6CA1\\u65B0\\u5EFA\\u6587\\u4EF6\\u5939\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u5B98\\u65B9\\u5F00\\u6E90\\uFF1F\\uFF01 \\uD83D\\uDCBD\"), mdx(\"p\", null, \"\\u4E4B\\u524D Vector \\u8FD9\\u4E2A\\u9879\\u76EE\\u662FAnki \\u8FD9\\u4E2A\\u516C\\u53F8\\u4F17\\u7B79\\u505A\\u7684\\uFF0C\\u4F46\\u662F\\u8FD9\\u4E2A\\u516C\\u53F8\\u6700\\u8FD1\\u88AB DDL(digital-dream-labs) \\u516C\\u53F8\\u6536\\u8D2D\\u3002\\u7FFB\\u4E86\\u4E0B\\u4ED6\\u4EEC\\u7684 Twitter\\uFF0C\\u672C\\u6765\\u60F3\\u627E\\u627E\\u6709\\u4EC0\\u4E48\\u9AD8\\u6E05\\u5927\\u56FE\\u4E4B\\u7C7B\\u7684\\u53C2\\u8003\\uFF0C\\u4F46\\u662F\\u610F\\u5916\\u770B\\u5230\\u4ED6\\u4EEC\\u73B0\\u5728\\u4ECD\\u7136\\u5728\\u4F17\\u7B79\\u7684\\u9875\\u9762\\uFF0C\\u7136\\u540E\\u5728\\u6700\\u8FD1\\u7684\\u66F4\\u65B0\\u4E2D\\u53D1\\u73B0\\u4E86\\u4E00\\u4E2A\\u5F88\\u91CD\\u8981\\u7684\\u4FE1\\u606F\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/163043-17ccf50e5e8617dbbceb9af75ce7a908.webp\",\n    \"alt\": null\n  })), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.kickstarter.com/projects/digitaldreamlabs/vector-unleashed/posts\"\n  }, \"https://www.kickstarter.com/projects/digitaldreamlabs/vector-unleashed/posts\")), mdx(\"p\", null, \"\\u867D\\u7136\\u662F\\u4EC5\\u652F\\u6301\\u8005\\u53EF\\u770B\\uFF0C\\u4F46\\u662F\\u7B80\\u5355\\u7684\\u641C\\u4E00\\u4E0B\\u53D1\\u73B0\\u5185\\u5BB9\\u88AB\\u653E\\u5230\\u4E86 GitHub \\u4E0A\\u3002\"), mdx(\"p\", null, \"\\u771F\\u662F\\u975E\\u5E38\\u96BE\\u5F97\\uFF0C\\u7FFB\\u4E86\\u4E00\\u4E0B\\u5C45\\u7136\\u662F\\u4E00\\u4E9B\\u539F\\u751F\\u7684\\u52A8\\u753B\\u6587\\u4EF6\\uFF1A\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/digital-dream-labs/vector-animations-raw\"\n  }, \"https://github.com/digital-dream-labs/vector-animations-raw\")), mdx(\"p\", null, \"\\u5305\\u62EC\\u6574\\u4E2A\\u7EC4\\u7EC7\\u4E0B\\u9762\\u7684\\u5F00\\u6E90\\u9879\\u76EE\\uFF0C\\u5305\\u62EC build \\u7684\\u5F88\\u591A\\u4EE3\\u7801\\u90FD\\u5F00\\u4E86\\u6E90\\uFF0C\\u751A\\u81F3\\u6709\\u8BE6\\u7EC6\\u7684\\u5B89\\u88C5\\u6559\\u7A0B\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u63A5\\u4E0B\\u6765\\u7684\\u5B9E\\u73B0\\u8DEF\\u7EBF \\uD83D\\uDCAD\"), mdx(\"p\", null, \"\\u5982\\u679C\\u60F3\\u8981\\u590D\\u523B\\u5B8C\\u6574\\u7684\\u673A\\u5668\\u4EBA\\u903B\\u8F91\\uFF0C\\u5B9E\\u8BDD\\u5B9E\\u8BDD\\u4E5F\\u786E\\u5B9E\\u4E0D\\u53EF\\u80FD\\u3002\\u4F46\\u662F\\u6211\\u53EA\\u662F\\u60F3\\u5B9E\\u73B0\\u600E\\u4E48\\u753B\\u51FA\\u6765\\u8FD9\\u4E9B\\uFF0C\\u6240\\u4EE5\\u4E0D\\u8981\\u6C42\\u592A\\u591A\\u3002\"), mdx(\"h3\", null, \"1 \\u7C97\\u7565\"), mdx(\"p\", null, \"\\u7FFB\\u4E86\\u7FFB\\u8FD9\\u4E2A\\u52A8\\u753B\\u8D44\\u6E90\\u4ED3\\u5E93\\uFF0C\\u627E\\u5230\\u4E86\\u4E00\\u4E9B\\u80FD\\u5F00\\u59CB\\u5DE5\\u4F5C\\u7684\\u70B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u867D\\u7136\\u662F\\u7528 maya \\u624D\\u80FD\\u4E0A\\u624B\\u7684\\u9879\\u76EE\\uFF0C\\u4F46\\u662F\\u91CC\\u9762\\u5305\\u542B\\u4E86\\u5F88\\u591A\\u7684\\u63A7\\u5236\\u6570\\u636E\\uFF0C\\u5927\\u90E8\\u5206\\u662F\\u52A8\\u753B\\u90E8\\u5206\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u91CC\\u9762\\u7FFB\\u5230\\u4E86\\u4E00\\u4E9B pose.json \\u7684\\u6587\\u4EF6\\uFF0C\\u5305\\u542B\\u4E86\\u63A7\\u5236\\u53C2\\u6570\\u548C\\u9884\\u89C8\\u56FE\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5927\\u6982 34 \\u4E2A\\u8868\\u60C5\\u76F8\\u5173\\u7684 pose\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u91CC\\u9762\\u7684\\u63A7\\u5236\\u53C2\\u6570\\u5305\\u62EC\\u4E86\\uFF1A\\u4F4D\\u79FB\\u3001\\u7F29\\u653E\\u3001\\u53D1\\u5149\\u3001\\u65CB\\u8F6C\\u3001\\u4EAE\\u5EA6\\u3001\\u5706\\u89D2\\u7B49\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E00\\u4E9B\\u6BD4\\u8F83\\u7279\\u522B\\u7684\\u6548\\u679C\\u76F4\\u63A5\\u7528\\u7684\\u5E8F\\u5217\\u5E27\\u505A\\u7684\")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"787px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/29b7a210dca8b777ff8b2bfe92eb0250/61f6d/face-list.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"40.15444015444015%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAME/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAdYZqB//xAAYEAADAQEAAAAAAAAAAAAAAAAAAREDEv/aAAgBAQABBQKsrOdD/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BR//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAIDAQAAAAAAAAAAAAAAAACRAQIyQf/aAAgBAQAGPwLVmalnWf/EAB0QAAECBwAAAAAAAAAAAAAAAAAB8BEhMWHB0eH/2gAIAQEAAT8hgo5W5PytjfR//9oADAMBAAIAAwAAABBz/wD/xAAVEQEBAAAAAAAAAAAAAAAAAAAQQf/aAAgBAwEBPxCD/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QV//EABkQAQADAQEAAAAAAAAAAAAAAAEAESExof/aAAgBAQABPxAeLMbVQFALb6EFZvM//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"face list\",\n    \"title\": \"face list\",\n    \"src\": \"/static/29b7a210dca8b777ff8b2bfe92eb0250/61f6d/face-list.jpg\",\n    \"srcSet\": [\"/static/29b7a210dca8b777ff8b2bfe92eb0250/fca29/face-list.jpg 259w\", \"/static/29b7a210dca8b777ff8b2bfe92eb0250/f4507/face-list.jpg 518w\", \"/static/29b7a210dca8b777ff8b2bfe92eb0250/61f6d/face-list.jpg 787w\"],\n    \"sizes\": \"(max-width: 787px) 100vw, 787px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u6709\\u4E86\\u8FD9\\u4E9B\\u63A7\\u5236\\u5E27\\u4E4B\\u540E\\u5927\\u6982\\u4E86\\u89E3\\u4E86\\u600E\\u4E48\\u5B9E\\u73B0\\uFF0C\\u4F46\\u662F\\u8FD8\\u4E0D\\u592A\\u6E05\\u695A\\u8FD9\\u4E9B\\u53C2\\u6570\\u600E\\u4E48\\u62FC\\u5728\\u4E00\\u8D77\\uFF0C\\u6BD4\\u5982\\u773C\\u775B\\u591A\\u5927\\u3001\\u539F\\u59CB\\u4F4D\\u7F6E\\u3001\\u5E94\\u7528\\u5728\\u4EC0\\u4E48\\u5F62\\u72B6\\u4E0A\\u4E4B\\u7C7B\\u3002\"), mdx(\"h3\", null, \"2 \\u6E32\\u67D3\\u770B\\u770B\"), mdx(\"p\", null, \"\\u5B98\\u65B9\\u6559\\u7A0B\\u56E0\\u4E3A\\u662F\\u7EAF\\u82F1\\u6587\\u7684\\uFF0C\\u800C\\u4E14\\u770B\\u5F97\\u51FA\\u6765\\u6574\\u4E2A\\u9879\\u76EE\\u7ECF\\u5386\\u4E86\\u5F88\\u591A\\u7684\\u201C\\u53D8\\u6545\\u201D\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maya 2016\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maya 2018\"), \" \\u8F6F\\u4EF6\\u90FD\\u6DF7\\u7740\\u7528\\u3002\"), mdx(\"p\", null, \"\\u5728 maya 2018 \\u6253\\u5F00\\u5931\\u8D25\\u540E\\u53C8\\u88C5\\u4E86 maya 2016 \\uFF0C\\u6309\\u7167\\u5B89\\u88C5\\u6D41\\u7A0B\\u88C5\\u4E86\\u63D2\\u4EF6\\uFF0C\\u4FEE\\u6539 env \\u6587\\u4EF6\\uFF0C\\u6700\\u540E\\u80FD\\u591F\\u6253\\u5F00\\u4E86\\u9879\\u76EE\\u7684\\u573A\\u666F\\uFF0C\\u80FD\\u591F\\u9884\\u89C8\\u5230\\u4ED6\\u4EEC\\u7684\\u9879\\u76EE\\u4E86\\uFF1A\"), mdx(\"video\", {\n    controls: true,\n    style: {\n      maxWidth: '100%'\n    },\n    src: \"/maya-preview-1-1758c674e4555d6340e012aec87000c6.mp4\"\n  }), mdx(\"video\", {\n    controls: true,\n    style: {\n      maxWidth: '100%'\n    },\n    src: \"/maya-preview-2-288d9d577e65cf57d08959634fe42893.mp4\"\n  }), mdx(\"p\", null, \"\\u7C97\\u7565\\u770B\\u4E86\\u4E0B\\uFF0C\\u56E0\\u4E3A\\u5BF9 maya \\u7528\\u7684\\u4E0D\\u719F\\u6089\\uFF0C\\u6240\\u4EE5\\u4E86\\u89E3\\u5230\\u7684\\u4E5F\\u5F88\\u6709\\u9650\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/13000978290a41ea42408c9a23efc30e/cc6c6/maya.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"38.996138996138995%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB2UlEQVQoz1WS0W/SUBTGeSHZGEiBllEKbbG00JbBhNGywgDHxlCzuSWamRkXTTTGxP//9ee5vCw+fLm3yTm/ft89J3f35SdXd0+s3j/y9vaJxeYDpWKRcllD1w0ajSaW1ca2XRznRW3XwWy1MOrHVLQqRenJ5/Pk7p//cvv1D5cP39l8+sXFzQOaplGt1gRm0mrZuB0Prxvg+6LAx496eGGA47+m6bTQ68bewOFhgdzu8zP3337z7vEH649PAryjJjBd18VZi06/T3D6hnA8IZIzGg2Jkik9+faGI2y/S8MyxWWFo6MSueU843pzydXlmnQ6IZulGEZdZNC2HbrSFE7OGCQJwyRleDZheJ4RTRN8gbpxjNk0qVYqEluAi4slm+0Nu92O1XpNls3/A/qnp9I85WQ2YzQ7ZyT30XxOnM4IJlM6gwGm1XwBXqzWbAW4WCxI04S5FNdq+j6yej8vHtAXJwNxdHImGo/F4bnEVg7HOL3ePrImkQuFIrnN9ZbVcimwlESKsiyjIn9TMmUoarqe5xP0QsJ+RBiJTmKCOMT1PSy3LZOuUyq94uDgQIYiUZUrBVPQqURSK6AK1NqYprWHdtSkvS5dkTpdT2C2Tf24gVZW7gr7tfkHn67rVfWK6owAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"maya\",\n    \"title\": \"maya\",\n    \"src\": \"/static/13000978290a41ea42408c9a23efc30e/0dc48/maya.png\",\n    \"srcSet\": [\"/static/13000978290a41ea42408c9a23efc30e/2c191/maya.png 259w\", \"/static/13000978290a41ea42408c9a23efc30e/86b01/maya.png 518w\", \"/static/13000978290a41ea42408c9a23efc30e/0dc48/maya.png 1035w\", \"/static/13000978290a41ea42408c9a23efc30e/cc6c6/maya.png 1371w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u6574\\u4E2A maya \\u8D1F\\u8D23\\u5F88\\u591A\\u573A\\u666F\\u7684\\u8BBE\\u8BA1\\u548C\\u5BFC\\u51FA\\uFF0C\\u63A7\\u5236\\u4E86\\u52A8\\u4F5C\\u53C2\\u6570\\u4EC0\\u4E48\\u7684\\u3002\\u52A8\\u753B\\u5E08\\u8BBE\\u8BA1\\u4E86\\u811A\\u672C\\u548C\\u573A\\u666F\\uFF0C\\u7136\\u540E\\u5728 maya \\u91CC\\u9762\\u5236\\u4F5C\\u52A8\\u753B\\uFF0C\\u7136\\u540E\\u5BFC\\u51FA\\u63A7\\u5236\\u53C2\\u6570\\uFF0C\\u6700\\u540E Robot \\u673A\\u5668\\u672C\\u4F53\\u6839\\u636E\\u53C2\\u6570\\u590D\\u73B0\\u884C\\u4E3A\\u548C\\u663E\\u793A\\u3002\"), mdx(\"p\", null, \"\\u773C\\u775B\\u7684 LED \\u90E8\\u4EF6\\u6BD4\\u8F83\\u7279\\u6B8A\\uFF0C\\u867D\\u7136\\u5728 maya \\u4E2D\\u770B\\u5F97\\u5230\\uFF0C\\u4F46\\u662F\\u548C\\u5B9E\\u9645\\u7684\\u753B\\u9762\\u4E0D\\u540C\\uFF0C\\u9700\\u8981\\u989D\\u5916\\u7684\\u4EE3\\u7801\\u624D\\u80FD\\u6E32\\u67D3\\u5230\\u5C4F\\u5E55\\u4E0A\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E5F\\u5C31\\u662F\\u4E0A\\u9762\\u90A3\\u4E9B\\u773C\\u775B\\u7684\\u66F2\\u7EBF\\u53EA\\u662F\\u53C2\\u6570\\u793A\\u610F\\u3002\")), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u80FD\\u770B\\u5230\\u6709\\u54EA\\u4E9B\\u63A7\\u5236\\u5143\\u7D20\\uFF0C\\u5305\\u62EC\\uFF1A\\u773C\\u775B\\u3001\\u4E0A\\u4E0B\\u773C\\u7751\\u3001\\u56DB\\u4E2A\\u5706\\u89D2\\u3001\\u77B3\\u5B54\\uFF0C\\u8FD9\\u4E9B\\u5143\\u7D20\\u90FD\\u80FD\\u63A7\\u5236\\u4F4D\\u79FB\\u3001\\u7F29\\u653E\\u3001\\u65CB\\u8F6C\\u7B49\\u57FA\\u672C\\u53C2\\u6570\\uFF0C\\u5F62\\u6210\\u6700\\u540E\\u6548\\u679C\\u3002\"), mdx(\"h3\", null, \"3 \\u6362\\u4E2A\\u4E3B\\u573A\"), mdx(\"p\", null, \"maya \\u4E0D\\u4F1A\\u7528\\uFF0C\\u597D\\u5728\\u9879\\u76EE\\u4E2D\\u6709\\u4E00\\u4E9B\\u6A21\\u578B\\uFF0Cfbx\\u3001obj \\u4E4B\\u7C7B\\u7684\\u6587\\u4EF6\\u3002\\u4E4B\\u524D\\u5BF9 Three.js \\u7528\\u7684\\u6BD4\\u8F83\\u591A\\uFF0C\\u6240\\u4EE5\\u7B80\\u5355\\u642D\\u4E86\\u4E2A\\u67B6\\u5B50\\u5C31\\u5F00\\u59CB\\u4E0A\\u624B\\u9884\\u89C8\\uFF0C\\u53BB\\u627E\\u81EA\\u5DF1\\u60F3\\u8981\\u7684\\u4E1C\\u897F\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"627px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/25333e88e5628895091e992a1cf65cc8/59025/three.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"64.47876447876449%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMCBAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAFlbTiJHB//xAAaEAACAgMAAAAAAAAAAAAAAAABAwASAhAR/9oACAEBAAEFAmGmCWFh5CJUDX//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAEAAgMAAAAAAAAAAAAAAAABEBEAAiH/2gAIAQEABj8CdsRqeFR//8QAGhABAQEBAAMAAAAAAAAAAAAAAREAIRAxcf/aAAgBAQABPyEGCzGTwXngCRKY9M+DTf/aAAwDAQACAAMAAAAQAw//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhMUFRcf/aAAgBAQABPxBCFGA5XUNqaWfc8xeJNiWMIQ5y0FxE/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"three\",\n    \"title\": \"three\",\n    \"src\": \"/static/25333e88e5628895091e992a1cf65cc8/59025/three.jpg\",\n    \"srcSet\": [\"/static/25333e88e5628895091e992a1cf65cc8/fca29/three.jpg 259w\", \"/static/25333e88e5628895091e992a1cf65cc8/f4507/three.jpg 518w\", \"/static/25333e88e5628895091e992a1cf65cc8/59025/three.jpg 627w\"],\n    \"sizes\": \"(max-width: 627px) 100vw, 627px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u5176\\u4E2D\\u773C\\u775B\\u90E8\\u5206\\u5355\\u72EC\\u8FC7\\u6EE4\\u540E\\uFF0C\\u5206\\u89E3\\u4E0B\\u5F62\\u72B6\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"951px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7d3bef049db721799b1fc219893336f4/fba4d/three-fbx.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.66795366795367%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAcu11YsoD//EABgQAQEBAQEAAAAAAAAAAAAAAAIBAwAh/9oACAEBAAEFAtEq8NFTKb22Z4GEzzv/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAACAgMBAAAAAAAAAAAAAAAAAREhEBIxUf/aAAgBAQAGPwJ2+lqfSjaLISx//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARMSGBQf/aAAgBAQABPyGkeXw1By5GkGQWwvkTay32cYB2AFBRP//aAAwDAQACAAMAAAAQYw//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEAAwEBAAAAAAAAAAAAAAABABEhMVH/2gAIAQEAAT8Q3TIAlAeRMQdKKy3kdBBq4HIyaKW0LyFRBser7BAg4BP/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"three fbx\",\n    \"title\": \"three fbx\",\n    \"src\": \"/static/7d3bef049db721799b1fc219893336f4/fba4d/three-fbx.jpg\",\n    \"srcSet\": [\"/static/7d3bef049db721799b1fc219893336f4/fca29/three-fbx.jpg 259w\", \"/static/7d3bef049db721799b1fc219893336f4/f4507/three-fbx.jpg 518w\", \"/static/7d3bef049db721799b1fc219893336f4/fba4d/three-fbx.jpg 951w\"],\n    \"sizes\": \"(max-width: 951px) 100vw, 951px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u4ECE\\u524D\\u9762\\u770B\\u7684\\u8BDD\\uFF0C\\u80FD\\u591F\\u5927\\u6982\\u770B\\u5230\\u6574\\u4E2A\\u773C\\u775B\\u7684\\u6548\\u679C\\u4E86\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"829px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/87be723c2bedcf36a75bfc42a0ed8e57/275dc/three-cut.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"58.687258687258684%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHAdJQjaK//xAAZEAACAwEAAAAAAAAAAAAAAAACAwABEhD/2gAIAQEAAQUC62snBUGf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxABAQEBAAAAAAAAAAAAAAAAARAAIv/aAAgBAQAGPwKoQ53/xAAYEAEAAwEAAAAAAAAAAAAAAAABACExEP/aAAgBAQABPyHo4ghstgan/9oADAMBAAIAAwAAABCrD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAQEBAAMAAAAAAAAAAAAAAAEAESExYf/aAAgBAQABPxAFkwnuKnEwLkD20CyFW//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"three cut\",\n    \"title\": \"three cut\",\n    \"src\": \"/static/87be723c2bedcf36a75bfc42a0ed8e57/275dc/three-cut.jpg\",\n    \"srcSet\": [\"/static/87be723c2bedcf36a75bfc42a0ed8e57/fca29/three-cut.jpg 259w\", \"/static/87be723c2bedcf36a75bfc42a0ed8e57/f4507/three-cut.jpg 518w\", \"/static/87be723c2bedcf36a75bfc42a0ed8e57/275dc/three-cut.jpg 829w\"],\n    \"sizes\": \"(max-width: 829px) 100vw, 829px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u770B\\u7740\\u633A\\u597D\\u73A9\\uFF0C\\u4F46\\u5C31\\u50CF\\u4E0A\\u9762\\u8BF4\\u7684\\uFF0C\\u8FD9\\u4E9B\\u90FD\\u662F\\u6A21\\u578B\\u56FE\\uFF0C\\u6700\\u5F00\\u59CB\\u7684\\u95EE\\u9898\\u8FD8\\u662F\\u6CA1\\u89E3\\u51B3\\uFF0C\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u600E\\u4E48\\u628A\\u53C2\\u6570\\u5B9E\\u73B0\\u6210\\u56FE\\u50CF\\uFF1F\")), mdx(\"h2\", null, \"\\u4E94\\u3001\\u4ED6\\u4EEC\\u600E\\u4E48\\u505A\\u7684\\uFF1F \\uD83D\\uDD0D\"), mdx(\"p\", null, \"\\u597D\\u5728\\u4ED6\\u4EEC\\u5F00\\u6E90\\u4E86\\u4E0D\\u6B62\\u8FD9\\u4E00\\u4E2A\\u52A8\\u753B\\u6587\\u4EF6\\u672C\\u8EAB\\uFF0C\\u4ED6\\u4EEC\\u8FD8\\u628A\\u4E3B\\u8981\\u7684\\u4EE3\\u7801\\u4ED3\\u5E93 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/digital-dream-labs/vector/blob/main/cannedAnimLib/proceduralFace/proceduralFaceDrawer.h#L70\"\n  }, \"\\u5F00\\u6E90\"), \" \\u4E86\\uFF0C\\u5305\\u62EC\\u4E86\\u600E\\u4E48\\u753B\\u9762\\u90E8\\u7684\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c28bdeeb5848783e066a30e5232de30e/d02af/draw-face.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"45.94594594594595%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABtElEQVQoz1VSy27VMBTMb7Ji0S0IVKFu+BEWSHwUmxZxb7mkvY3zsBO/YjtOhnEulDbSyJbjc2bOjKsPN5/x7uMnvL++wZu3V/jy9Rs2ADFGTMbAOku4Hc57eMJxH0LA62/Dtm2oTmJE0zRIy7IfrOuKmBbEOUJ1CkPvoKeAcTKQSnO1O4z1CDGxcSL5gmVZ97ZVpwN+3p8Q/zFS3hxmZC8Qxkc41cFyncYHjKpGME9IcwvLdXYNvG1gpjOsPmOJPSpLJcdfNU71Izz3mUQpFVZPJQpaKxgzYuLeecORC4oNmvctJ4o7co7Y1oRK2YTb4wO+393jUAu4uHL8jDwHxNHAyMyRZwxSQbQdFU9wcoQmDG2wc6JV/52sHAuPHFkIgTVnlL/Fm+w8EhHDgpl3ShhF+UaPy70LVk607t6Xuj2UgSpaMufSrFjIwxJKthaSJL3s99CGvt+bvUz1VcZ/ZVZ1q6GkxIXkwlIUGh/RSQPRa7RyQqsMmmGCGDSE1BhGi57QPmFO63PT6nCm6Vq/YNmYMp8M03/qLOrG0tsBP07E7w63J4E74lB3aJRHwyelXHqu/wNptq/+7wbeBAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"draw face\",\n    \"title\": \"draw face\",\n    \"src\": \"/static/c28bdeeb5848783e066a30e5232de30e/0dc48/draw-face.png\",\n    \"srcSet\": [\"/static/c28bdeeb5848783e066a30e5232de30e/2c191/draw-face.png 259w\", \"/static/c28bdeeb5848783e066a30e5232de30e/86b01/draw-face.png 518w\", \"/static/c28bdeeb5848783e066a30e5232de30e/0dc48/draw-face.png 1035w\", \"/static/c28bdeeb5848783e066a30e5232de30e/d02af/draw-face.png 1295w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u9879\\u76EE\\u672C\\u8EAB\\u7528\\u5230\\u4E86 openCV\\uFF08\\u4E0A\\u6B21\\u7528\\u5230\\u8FD8\\u662F\\u5728\\u672C\\u79D1\\u7684\\u65F6\\u5019\\uFF09\\uFF0C\\u5F88\\u5F3A\\u5927\\u7684\\u4E00\\u4E2A\\u8BA1\\u7B97\\u673A\\u89C6\\u89C9\\u5E93\\uFF0C\\u867D\\u7136\\u5DF2\\u7ECF\\u5C01\\u88C5\\u7684\\u5F88\\u597D\\u4E86\\uFF0C\\u4F46\\u662F\\u5230\\u5904\\u90FD\\u662F Matrix \\u548C Vector \\u8FD8\\u662F\\u7740\\u5B9E\\u61F5\\u4E86\\u4E00\\u9635\\u5B50\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5...\\u76F4\\u63A5\\u65E0\\u8111\\u590D\\u523B\\u6574\\u4E2A\\u7ED8\\u5236\\u903B\\u8F91\\u4E0D\\u5C31\\u884C\\u4E86\\u5417\\uFF1F\\u800C\\u4E14\\u4E0D\\u5C31\\u662F CPP \\u561B\\uFF1F\\u4E0D\\u5C31\\u662F\\u77E9\\u9635\\u561B\\uFF1F\\u4E0D\\u5C31\\u662F\\u5411\\u91CF\\u8FD0\\u7B97\\u561B\\uFF1F\\u4E0D\\u5C31\\u662F openCV \\u561B\\uFF1F\\u90FD\\u5199\\u8FC7\\u7684\\u4E1C\\u897F\\uFF0C\\u5728 TypeScript \\u4E2D\\u590D\\u523B\\u6574\\u4E2A\\u903B\\u8F91\\u4E0D\\u4F1A\\u5F88\\u96BE\\u5427\\uFF0C\\u5F00\\u5E72\\uFF01\"), mdx(\"p\", null, \"\\u82B1\\u4E86\\u4E00\\u4E9B\\u65F6\\u95F4\\uFF0C\\u7528\\u4E86 opencv-ts\\u3001tstl\\u3001tsm \\u7B49\\u7B2C\\u4E09\\u65B9\\u5E93\\uFF0C\\u52A0\\u4E0A\\u5F88\\u591A\\u9B54\\u6539\\uFF0C\\u7EC8\\u4E8E\\u628A\\u4EE3\\u7801\\u4ECE C++ \\u8F6C\\u5230 TypeScript \\u4E0B\\u4E86\\uFF0C\\u56E0\\u4E3A\\u53EA\\u662F\\u4EE3\\u7801\\u7EA7\\u522B\\u7684\\u79FB\\u690D\\uFF0C\\u4E5F\\u90FD\\u662F\\u56FE\\u50CF\\u7EA7\\u522B\\u7684\\u6570\\u5B66\\u8BA1\\u7B97\\uFF0C\\u91CC\\u9762\\u7684\\u903B\\u8F91\\u4E0D\\u7528\\u8003\\u8651\\u592A\\u591A\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c524dc8a910015e73d49ec8baacf5722/28bb8/recode.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"73.35907335907336%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAQAF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAckRCpf/xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAEFAl//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAWEAEBAQAAAAAAAAAAAAAAAAAQEQD/2gAIAQEAAT8hbqf/2gAMAwEAAgADAAAAEA8P/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGRABAQEAAwAAAAAAAAAAAAAAAQAhEWFx/9oACAEBAAE/EAyfLkyQEjqdb//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"recode\",\n    \"title\": \"recode\",\n    \"src\": \"/static/c524dc8a910015e73d49ec8baacf5722/dcf47/recode.jpg\",\n    \"srcSet\": [\"/static/c524dc8a910015e73d49ec8baacf5722/fca29/recode.jpg 259w\", \"/static/c524dc8a910015e73d49ec8baacf5722/f4507/recode.jpg 518w\", \"/static/c524dc8a910015e73d49ec8baacf5722/dcf47/recode.jpg 1035w\", \"/static/c524dc8a910015e73d49ec8baacf5722/28bb8/recode.jpg 1117w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u8BF4\\u5B9E\\u8BDD\\u8FD9\\u4E2A\\u65F6\\u5019\\uFF0C\\u6211\\u7684\\u5185\\u5FC3\\u4E0D\\u662F\\u957F\\u8212\\u4E00\\u53E3\\u6C14\\uFF0C\\u800C\\u662F\\u5F88\\u62C5\\u5FC3\\uFF0C\\u56E0\\u4E3A\\u6211\\u77E5\\u9053\\u8FD9\\u79CD\\u4EE3\\u7801\\u79FB\\u690D\\u4E0D\\u53EF\\u80FD\\u4E00\\u6B21\\u6210\\u529F\\uFF0C\\u5C24\\u5176\\u6D89\\u53CA\\u5230\\u5468\\u8FB9\\u5176\\u4ED6\\u6587\\u4EF6\\u7684\\u903B\\u8F91\\uFF0C\\u6BD5\\u7ADF\\u539F\\u4EE3\\u7801\\u6211\\u6CA1\\u8DD1\\u8D77\\u6765\\uFF0C\\u6240\\u4EE5\\u66F4\\u9700\\u8981\\u5F88\\u591A\\u8C03\\u8BD5\\uFF0C\\u751A\\u81F3\\u4E00\\u4E2A\\u8FD0\\u7B97\\u9519\\u8BEF\\u90FD\\u8981\\u6392\\u67E5\\u5F88\\u4E45\\uFF0C\\u67D0\\u4E00\\u4E2A\\u77E9\\u9635\\u76F8\\u4E58\\u7684\\u6B63\\u786E\\u6027\\u51FA\\u9519\\u4E86\\u90FD\\u5F88\\u96BE\\u5B9A\\u4F4D\\u5230\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u8003\\u8651\\u4E86\\u4E00\\u4E0B\\uFF0C\\u51B3\\u5B9A\\u4E0D\\u82B1\\u8D39\\u8FD9\\u4E48\\u5927\\u7CBE\\u529B\\u53BB\\u8C03\\u8BD5\\u4E86\\u3002\\u5373\\u4F7F\\u6211\\u53EF\\u4EE5\\u4E00\\u4E2A\\u4E2A\\u51FD\\u6570\\u7684\\u8C03\\u8BD5\\uFF0C\\u751A\\u81F3\\u53EF\\u80FD\\u534A\\u4E2A\\u5C0F\\u65F6\\u8C03\\u8BD5\\u6210\\u529F\\uFF0C\\u6700\\u7EC8\\u80FD\\u591F 100% \\u590D\\u523B\\uFF0C\\u4F46\\u662F\\u8FD9\\u4E2A side project \\u6211\\u4E0D\\u592A\\u60F3\\u8D4C\\u8FD9\\u4E2A\\u65F6\\u95F4\\u4E86\\uFF0C\\u5982\\u679C\\u6709\\u4EBA\\u7ED9\\u94B1\\u8FD8\\u884C\\uFF0C\\u5982\\u679C\\u518D\\u8981\\u4E00\\u5929\\u751A\\u81F3\\u66F4\\u957F\\u65F6\\u95F4\\u90FD\\u4E0D\\u4E00\\u5B9A\\u8C03\\u8BD5\\u51FA\\u6765\\uFF0C\\u6210\\u672C\\u592A\\u9AD8\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u522B\\u4EBA\\u7684\\u6838\\u5FC3\\u903B\\u8F91\\u4E0D\\u52A0\\u601D\\u8003\\u76F4\\u63A5\\u642C\\u8FD0\\uFF0C\\u5728\\u67D0\\u4E9B\\u573A\\u666F\\u53EF\\u4EE5\\u5B9E\\u73B0\\u6548\\u679C\\uFF0C\\u4F46\\u662F\\u5982\\u679C\\u903B\\u8F91\\u6BD4\\u8F83\\u590D\\u6742\\u3001\\u9ED1\\u76D2\\u7F15\\u4E0D\\u51FA\\u6765\\u8109\\u7EDC\\u7684\\u8BDD\\uFF0C\\u6700\\u7EC8\\u4EA4\\u4ED8\\u4F1A\\u51FA\\u95EE\\u9898\\u7684\\uFF0C\\u4E0D\\u7BA1\\u600E\\u4E48\\u6837\\u6E90\\u7801\\u8FD8\\u662F\\u8981\\u8BFB\\u4E00\\u8BFB\\u7684\\u3002\")), mdx(\"h2\", null, \"\\u516D\\u3001\\u53EA\\u5173\\u5FC3\\u6838\\u5FC3\\u7ED8\\u5236\\u53C2\\u6570\\u7684\\u610F\\u4E49\"), mdx(\"h3\", null, \"1 \\u731C\\u53C2\\u6570\\u5230\\u8C03\\u53C2\\u6570\"), mdx(\"p\", null, \"\\u5176\\u5B9E\\u770B\\u5230\\u4E4B\\u524D\\u7684 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/pose-d2f61c6ea6ec320dcbf49170c4ae30d6.json\"\n  }, \"pose.json\"), \" \\u5DF2\\u7ECF\\u5927\\u6982\\u77E5\\u9053\\u6709\\u54EA\\u4E9B\\u63A7\\u5236\\u4E86\\uFF0C\\u5C31\\u662F\\u4E0D\\u592A\\u6E05\\u695A\\u8FD9\\u4E9B\\u63A7\\u5236\\u53C2\\u6570\\u65BD\\u52A0\\u5728\\u90A3\\u4E9B\\u5143\\u7D20\\u4E0A\\uFF0C\\u539F\\u59CB\\u903B\\u8F91\\u4E5F\\u90FD\\u662F\\u77E9\\u9635\\u8FD0\\u7B97\\uFF0C\\u5E76\\u4E0D\\u662F\\u5F88\\u6E05\\u6670\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7...\\u4E0D\\u5C31\\u662F\\u731C\\u561B\\uFF1F\\uFF01\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"metadata\\\": \\\"...\\\",\\n  \\\"objects\\\": {\\n    \\\"x:eyeCorner_L_innerBtm_ctrl\\\": {\\n      \\\"attrs\\\": {\\n        \\\"scaleX\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 0.9363065595417932 },\\n        \\\"scaleY\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 1.0393205391389768 }\\n      }\\n    },\\n    \\\"x:mech_eye_R_ctrl\\\": {\\n      \\\"attrs\\\": {\\n        \\\"translateX\\\": { \\\"type\\\": \\\"doubleLinear\\\", \\\"value\\\": 0.0 },\\n        \\\"translateY\\\": { \\\"type\\\": \\\"doubleLinear\\\", \\\"value\\\": 0.0 },\\n        \\\"GlowSize\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 0.5 },\\n        \\\"scaleX\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 1.0434263501720864 },\\n        \\\"scaleY\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 1.0434263501720864 },\\n        \\\"rotateZ\\\": { \\\"type\\\": \\\"doubleAngle\\\", \\\"value\\\": 0.0 },\\n        \\\"Lightness\\\": { \\\"type\\\": \\\"double\\\", \\\"value\\\": 1.0 }\\n      }\\n    },\\n    // ...\\n}\\n\")), mdx(\"p\", null, \"\\u4F4D\\u79FB\\u65CB\\u8F6C\\u4EC0\\u4E48\\u7684\\u57FA\\u672C\\u4E0A\\u90FD\\u80FD\\u591F\\u77E5\\u9053\\u4E86\\uFF0C\\u5728\\u4EE3\\u7801\\u79FB\\u690D\\u7684\\u8FC7\\u7A0B\\u4E2D\\u57FA\\u672C\\u4E0A\\u90FD\\u77E5\\u9053\\u5404\\u4E2A\\u53C2\\u6570\\u7684\\u610F\\u4E49\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u9605\\u8BFB\\u4E86\\u4E24\\u904D\\u539F\\u59CB\\u7684\\u7ED8\\u5236\\u4EE3\\u7801\\uFF0C\\u4E5F\\u57FA\\u672C\\u4E0A\\u77E5\\u9053\\u4E86\\u56FE\\u50CF\\u5F62\\u72B6\\u3001\\u5706\\u89D2\\u3001\\u4F4D\\u7F6E\\u4E4B\\u7C7B\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"h3\", null, \"2 \\u5148\\u8DD1\\u8D77\\u6765\\u662F\\u4E00\\u4E2A\\u7A0B\\u5E8F\\u5F88\\u4E0D\\u9519\\u7684\\u5F00\\u59CB\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u6211\\u4EEC\\u5C31\\u610F\\u8BC6\\u5230\\u4E86\\uFF0C\\u90A3\\u4E9B\\u66F2\\u7EBF\\u53EA\\u662F\\u793A\\u610F\\u56FE\\uFF0C\\u4F46\\u662F\\u5374\\u63D0\\u793A\\u6211\\u4EEC\\u5927\\u81F4\\u5404\\u4E2A\\u90E8\\u4F4D\\u7684\\u4F4D\\u7F6E\\u3002\"), mdx(\"p\", null, \"\\u81F3\\u4E8E\\u7528 css\\u3001svg\\u3001canvas \\u90FD\\u662F\\u7ED8\\u5236\\u7684\\u4E0D\\u540C\\u5B9E\\u73B0\\uFF0C\\u521A\\u5F00\\u59CB\\u5148\\u7528\\u6700\\u5BB9\\u6613\\u5B9E\\u73B0\\u7684 div + css \\u642D\\u51FA\\u6765\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"eye-panel\\\">\\n  <div class=\\\"eye left-eye\\\">\\n    <div class=\\\"pupil\\\"></div>\\n    <div class=\\\"upperLid\\\"></div>\\n    <div class=\\\"lwrLid\\\"></div>\\n  </div>\\n  <div class=\\\"eye right-eye\\\">\\n    <div class=\\\"pupil\\\"></div>\\n    <div class=\\\"upperLid\\\"></div>\\n    <div class=\\\"lwrLid\\\"></div>\\n  </div>\\n</div>\\n\")), mdx(\"p\", null, \"\\u51E0\\u4E2A\\u5173\\u952E\\u7684\\u70B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"css border-radius \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-top-left-radius\"\n  }, \"\\u652F\\u6301\\u692D\\u5706\\u5F27\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u90E8\\u5206\\u53C2\\u6570\\u7684\\u8BBE\\u7F6E\\u533A\\u5206\\u5DE6\\u53F3\\uFF0C\\u914D\\u7F6E\\u6587\\u4EF6\\u7684\\u5DE6\\u53F3\\u548C\\u89C6\\u89C9\\u7684\\u5DE6\\u53F3\\u76F8\\u53CD\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5F88\\u591A\\u6570\\u636E\\u4E0D\\u662F\\u5728\\u4E00\\u4E2A\\u9879\\u76EE\\u91CC\\u9762\\uFF0C\\u6240\\u4EE5\\u627E\\u8D77\\u6765\\u5F88\\u9EBB\\u70E6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u53C2\\u6570\\u7684\\u5E94\\u7528\\u591A\\u8BD5\\u8BD5\\u5C31\\u884C\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u539F\\u9879\\u76EE\\u7684\\u7ED8\\u5236\\u90FD\\u662F\\u5B9A\\u4F4D\\u505A\\u7684\\uFF0C\\u6240\\u4EE5\\u4E3A\\u4E86\\u5BB9\\u6613\\u8C03\\u8BD5\\uFF0C\\u4E5F\\u90FD\\u6CA1\\u7528 flex \\u4E4B\\u7C7B\\u7684\\u5E03\\u5C40\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5B9A\\u4F4D\\u53EF\\u4EE5\\u4F7F\\u7528 absolute + top\\u3001left \\u6216\\u8005 transform: translate\\uFF0C\\u540E\\u8005\\u6027\\u80FD\\u66F4\\u597D\\u4F46\\u662F scale \\u548C translate \\u7B49\\u6548\\u679C\\u4F1A\\u53E0\\u52A0\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"overflow: hidden; \\u7684\\u5B9E\\u73B0\\u5728\\u90E8\\u5206\\u6D4F\\u89C8\\u5668\\u4E0A\\u5B58\\u5728\\u8FB9\\u754C\\u9732\\u8FB9\\u95EE\\u9898\\uFF0C\\u53EF\\u4EE5\\u7528 clip-path \\u4EE3\\u66FF\\uFF08\\u6240\\u4EE5\\u773C\\u7751\\u7684\\u5B9E\\u73B0\\u4E0D\\u7528div\\uFF0C\\u800C\\u662F\\u7528 clip-path \\u7684\\u6837\\u5F0F\\u76F4\\u63A5\\u5207\\u51FA\\u6765\\uFF0C\\u4E0A\\u9762\\u7684 html \\u7ED3\\u6784\\u4E5F\\u56E0\\u6B64\\u6539\\u53D8\\u4E86\\uFF09\")), mdx(\"p\", null, \"\\u4E00\\u70B9\\u6E90\\u7801\\u9605\\u8BFB\\uFF0C\\u52A0\\u4E0A\\u4E00\\u70B9\\u70B9\\u7EC6\\u8282\\uFF08\\u5404\\u79CD CSS: border-radius\\u3001position \\u548C transform\\u3001clip-path\\uFF09\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"458px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5ca58e45eb33b3d5be56b749f96b1ffe/83f20/tryout.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"50.57915057915058%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUE/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQP/2gAMAwEAAhADEAAAAYuyaZgU/8QAFxABAQEBAAAAAAAAAAAAAAAAAgMBIP/aAAgBAQABBQKJx0UBg4//xAAXEQEAAwAAAAAAAAAAAAAAAAABAhAx/9oACAEDAQE/AWKu1//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/Aaf/xAAZEAEAAgMAAAAAAAAAAAAAAAABAAIRIDH/2gAIAQEABj8CKrgl0vzX/8QAGhAAAgIDAAAAAAAAAAAAAAAAAREAIDFBUf/aAAgBAQABPyFqI3H5DiO1/9oADAMBAAIAAwAAABCcD//EABcRAAMBAAAAAAAAAAAAAAAAAAEQEVH/2gAIAQMBAT8QtBAxf//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxAAYk//xAAaEAACAgMAAAAAAAAAAAAAAAABIRARAEFR/9oACAEBAAE/EG05fCw5G04aQJ//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"tryout\",\n    \"title\": \"tryout\",\n    \"src\": \"/static/5ca58e45eb33b3d5be56b749f96b1ffe/83f20/tryout.jpg\",\n    \"srcSet\": [\"/static/5ca58e45eb33b3d5be56b749f96b1ffe/fca29/tryout.jpg 259w\", \"/static/5ca58e45eb33b3d5be56b749f96b1ffe/83f20/tryout.jpg 458w\"],\n    \"sizes\": \"(max-width: 458px) 100vw, 458px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"443px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/fd6f9494ed9f23c3e100a1b8f28dbf80/f579b/css-1.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"52.89575289575289%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAIBAwQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAebL1s7xgr//xAAbEAADAAIDAAAAAAAAAAAAAAABAgMAEwQREv/aAAgBAQABBQLbSzt6mIcipTWvSIpyKKF//8QAFhEBAQEAAAAAAAAAAAAAAAAAEQEQ/9oACAEDAQE/ASuf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHBAAAgIDAQEAAAAAAAAAAAAAAAECEQMxQVFh/9oACAEBAAY/Akp5a+iks1u/R3Lpo0a6f//EABwQAAICAgMAAAAAAAAAAAAAAAABESExcZGhsf/aAAgBAQABPyFb6CiqKwQckuiHPfpixz2HmOQ//9oADAMBAAIAAwAAABAA7//EABcRAAMBAAAAAAAAAAAAAAAAAAEQIRH/2gAIAQMBAT8QNGxf/8QAFxEBAAMAAAAAAAAAAAAAAAAAARARMf/aAAgBAgEBPxASsj//xAAeEAEAAgIBBQAAAAAAAAAAAAABABEhMVFBYXHB8f/aAAgBAQABPxBAxBBKnmqh1sRilaatxiIjVsvAPHeHA7Cz7R+urWR7gDQW6uCf/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"css 1\",\n    \"title\": \"css 1\",\n    \"src\": \"/static/fd6f9494ed9f23c3e100a1b8f28dbf80/f579b/css-1.jpg\",\n    \"srcSet\": [\"/static/fd6f9494ed9f23c3e100a1b8f28dbf80/fca29/css-1.jpg 259w\", \"/static/fd6f9494ed9f23c3e100a1b8f28dbf80/f579b/css-1.jpg 443w\"],\n    \"sizes\": \"(max-width: 443px) 100vw, 443px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"669px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a8a7f0a9c4fede26b3792d41ba0bb94f/4663f/css-2.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"38.996138996138995%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEEBf/EABYBAQEBAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABo6IXANP/xAAXEAEBAQEAAAAAAAAAAAAAAAADAQAC/9oACAEBAAEFAidL3EXRG3//xAAXEQADAQAAAAAAAAAAAAAAAAABAhAh/9oACAEDAQE/AVGT/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGhAAAgIDAAAAAAAAAAAAAAAAAAIBkSIxMv/aAAgBAQAGPwKM3Omo21H/xAAYEAEBAQEBAAAAAAAAAAAAAAABABEhQf/aAAgBAQABPyEJGcdFsfRb6If/2gAMAwEAAgADAAAAEIAP/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERUf/aAAgBAwEBPxCkEWH/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQIBAT8QXG1v/8QAGxABAAIDAQEAAAAAAAAAAAAAARFBACExUfD/2gAIAQEAAT8Q6ZeELGoLxV4QEq1XuKFkL85n/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"css 2\",\n    \"title\": \"css 2\",\n    \"src\": \"/static/a8a7f0a9c4fede26b3792d41ba0bb94f/4663f/css-2.jpg\",\n    \"srcSet\": [\"/static/a8a7f0a9c4fede26b3792d41ba0bb94f/fca29/css-2.jpg 259w\", \"/static/a8a7f0a9c4fede26b3792d41ba0bb94f/f4507/css-2.jpg 518w\", \"/static/a8a7f0a9c4fede26b3792d41ba0bb94f/4663f/css-2.jpg 669w\"],\n    \"sizes\": \"(max-width: 669px) 100vw, 669px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"675px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2eae0f01b2ff8f335f095552b546f42d/b5890/css-3.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"37.83783783783784%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHPnEsBf//EABkQAAIDAQAAAAAAAAAAAAAAAAIDAAEEEv/aAAgBAQABBQIdLZWlvKHuIf/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/AYf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAdEAAABgMBAAAAAAAAAAAAAAAAAQIDESESIlEx/9oACAEBAAY/AqcXMC3lEfMRso/eD//EABkQAAMAAwAAAAAAAAAAAAAAAAABESExYf/aAAgBAQABPyGnKpsfvkUaWww//9oADAMBAAIAAwAAABCID//EABYRAQEBAAAAAAAAAAAAAAAAAAEREP/aAAgBAwEBPxBSS5//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxAZ/8QAGRABAAMBAQAAAAAAAAAAAAAAAQARIUFh/9oACAEBAAE/ENA0iVS64bfYx2Wgx5tdgPyi0GUeT//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"css 3\",\n    \"title\": \"css 3\",\n    \"src\": \"/static/2eae0f01b2ff8f335f095552b546f42d/b5890/css-3.jpg\",\n    \"srcSet\": [\"/static/2eae0f01b2ff8f335f095552b546f42d/fca29/css-3.jpg 259w\", \"/static/2eae0f01b2ff8f335f095552b546f42d/f4507/css-3.jpg 518w\", \"/static/2eae0f01b2ff8f335f095552b546f42d/b5890/css-3.jpg 675w\"],\n    \"sizes\": \"(max-width: 675px) 100vw, 675px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/614a7/css-code.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"59.07335907335908%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHky5Shf//EABYQAAMAAAAAAAAAAAAAAAAAAAABIP/aAAgBAQABBQKWf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABkQAAIDAQAAAAAAAAAAAAAAAAABEBExcf/aAAgBAQABPyFs6PS40f/aAAwDAQACAAMAAAAQHA//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPxAn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhAAAwEBAQEAAAAAAAAAAAAAAAERMSFxwf/aAAgBAQABPxBsi55SvtW4bfSsGo0cbP/Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"css code\",\n    \"title\": \"css code\",\n    \"src\": \"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/dcf47/css-code.jpg\",\n    \"srcSet\": [\"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/fca29/css-code.jpg 259w\", \"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/f4507/css-code.jpg 518w\", \"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/dcf47/css-code.jpg 1035w\", \"/static/d4c5af4b74d7db2a0f7f3f3cef7fe3e2/614a7/css-code.jpg 1187w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u592A\\u6709\\u610F\\u601D\\u4E86\\uFF0C\\u8FC7\\u7A0B\\u4E2D\\u82B1\\u8D39\\u4E86\\u5F88\\u591A\\u7684\\u5FC3\\u601D\\uFF0C\\u5B9E\\u73B0\\u6548\\u679C\\u56E0\\u4E3A\\u4E0D\\u4F18\\u96C5\\uFF0C\\u4E5F\\u6539\\u4E86\\u4E09\\u56DB\\u7248\\u6574\\u4E2A\\u4EE3\\u7801\\uFF0C\\u4E0D\\u592A\\u60F3\\u5C06\\u5C31\\u561B\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u4E0D\\u60F3\\u5728\\u5B9E\\u73B0\\u7EC6\\u8282\\u4E0A\\u6D6A\\u8D39\\u592A\\u591A\\u53E3\\u820C\\uFF0C\\u4E5F\\u65E0\\u610F\\u505A\\u624B\\u628A\\u624B\\u6559\\u7A0B\\u4EC0\\u4E48\\u7684\\uFF0C\\u6240\\u4EE5\\u4EE3\\u7801\\u51E0\\u4E4E\\u6CA1\\u8D34\\uFF0C\\u6709\\u611F\\u5174\\u8DA3\\u7684\\u53EF\\u4EE5\\u8054\\u7CFB\\u6211\\u4E00\\u8D77\\u4EA4\\u6D41\\uFF0C\\u867D\\u7136\\u5F88\\u559C\\u6B22\\u5F00\\u6E90\\u7CBE\\u795E\\uFF0C\\u4F46\\u662F\\u4F38\\u624B\\u515A\\u90A3\\u4E48\\u591A\\u7684\\u73B0\\u5728\\uFF0C\\u6709\\u610F\\u601D\\u7684\\u4E2A\\u4EBA\\u9879\\u76EE\\u8FD8\\u662F\\u6342\\u7740\\u5427\\uFF0C\\u5982\\u679C\\u54EA\\u5929\\u5F00\\u5FC3\\u4E86\\u518D\\u5F00\\u6E90\\u51FA\\u6765\\u3002\")), mdx(\"h2\", null, \"\\u4E03\\u3001\\u6700\\u7EC8\\u6548\\u679C \\uD83C\\uDF89\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/fccbb02c02edd364db50730c6aa746de/3aba4/my-vector.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"74.13127413127414%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgT/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABc670k0B//8QAGxAAAQQDAAAAAAAAAAAAAAAAAwABAhIEEBP/2gAIAQEAAQUC7DQ3u9E2IFDFCGv/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAeEAABBAEFAAAAAAAAAAAAAAABAAIRMgMQM3Ghsf/aAAgBAQAGPwLd9RDcskcqzlTtEtbE6f/EABwQAAICAgMAAAAAAAAAAAAAAAABEUEhMWGB8P/aAAgBAQABPyGa66CLiGkHsxWedsP0T7ZbIR//2gAMAwEAAgADAAAAENs//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8QiP/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/EKf/xAAbEAEAAwADAQAAAAAAAAAAAAABABEhMUFhcf/aAAgBAQABPxAahYaBO3qsirC2UQLmMMbZF4A8tO+bkNKYO419Z5T/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"my vector\",\n    \"title\": \"my vector\",\n    \"src\": \"/static/fccbb02c02edd364db50730c6aa746de/dcf47/my-vector.jpg\",\n    \"srcSet\": [\"/static/fccbb02c02edd364db50730c6aa746de/fca29/my-vector.jpg 259w\", \"/static/fccbb02c02edd364db50730c6aa746de/f4507/my-vector.jpg 518w\", \"/static/fccbb02c02edd364db50730c6aa746de/dcf47/my-vector.jpg 1035w\", \"/static/fccbb02c02edd364db50730c6aa746de/3aba4/my-vector.jpg 1065w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"video\", {\n    controls: true,\n    style: {\n      maxWidth: '100%'\n    },\n    src: \"/my-vector-99e5425ec085d7ad0dd149de57843425.mp4\"\n  }), mdx(\"p\", null, \"\\u539F\\u7248\\u76F8\\u6BD4\\u8FD8\\u6709\\u968F\\u673A\\u566A\\u70B9\\u3001\\u626B\\u63CF\\u7EBF\\u3001\\u53D1\\u5149\\u548C\\u4EAE\\u5EA6\\uFF0C\\u4E0D\\u8FC7\\u8FD9\\u4E9B\\u90FD\\u662F\\u7B80\\u5355\\u7684\\u7EC6\\u8282\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u516B\\u3001\\u52A8\\u8D77\\u6765 \\uD83D\\uDD79\"), mdx(\"p\", null, \"\\u6587\\u7AE0\\u884C\\u81F3\\u6B64\\u5904\\u5DF2\\u7ECF\\u5570\\u55E6\\u5F88\\u957F\\u4E86\\uFF0C\\u5B9E\\u73B0\\u9759\\u6001\\u7684\\u8868\\u60C5\\uFF0C\\u9876\\u591A\\u662F\\u5207\\u6362\\u7684\\u65F6\\u5019\\u7528 css \\u7684\\u52A8\\u753B\\u5B9E\\u73B0\\u4E86\\u8F6C\\u6362\\u52A8\\u753B\\u3002\"), mdx(\"p\", null, \"\\u540E\\u9762\\u7684\\u539F\\u5382\\u52A8\\u753B\\u65B0\\u5F00\\u4E0B\\u4E00\\u7BC7\\u6587\\u7AE0\\u5199\\u3002\"), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/k_vrc\"\n  }, \"\\u673A\\u5668\\u4EBA\\u773C\\u775B\\u52A8\\u753B\\u7684\\u6F14\\u793A\")), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u52A8\\u753B\\u7684\\u5B9E\\u73B0\\u5728\\u6700\\u540E\\u7528 SVG \\u548C Canvas \\u91CD\\u6784\\u4E86\\uFF0C\\u6240\\u4EE5\\u672C\\u7BC7\\u6587\\u7AE0\\u7684\\u793A\\u4F8B\\u4EE3\\u7801\\u770B\\u770B\\u5C31\\u884C\\uFF0C\\u800C\\u4E14\\u6211\\u7684\\u5927\\u90E8\\u5206\\u6587\\u7AE0\\u4E00\\u822C\\u4E0D\\u6D89\\u53CA\\u624B\\u628A\\u624B\\u7684\\u4EE3\\u7801\\u7EC6\\u8282\\u3002\")), mdx(\"hr\", null));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"b7cc2c7b-b49d-5445-9986-bd800c4695c1","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/kvrc/doc2.md","id":"e39d5e0b-deda-5587-933d-d45603d8ebfe","parent":{"name":"doc2","sourceInstanceName":"blog"},"excerpt":"想分享的是一个已经有初步思路的问题，怎么再进一步实现我们的目标形态。 〇、上回书说到 上一篇文章写了实现静态的图像了，不过官方的开源中还包含了一个动画的资源，多达一千多个动画，这篇文章写写怎么实现这个动画。 一、动画文件的参数 先看一个动画的控制数据： 大概能分析有多种类型的控制，以 ms 为单位排布，能控制多种类型： 我们这里关心的就是表情控制和程序表情关键帧，在程序里面被称为：动画片段 (animClip)\n和序列帧动画 (spriteSequence…","fields":{"title":"🤖 机器人眼睛动画的实现 2","slug":"/blog/k-vrc-vector-cozmo-2","description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","date":"2021-09-04","redirects":null,"datetime":"2021-09-04 16:34:10","categories":["code"],"series":null,"tags":["整理","思考"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","思考"],"theme":null,"slug":"k-vrc-vector-cozmo-2","date":"2021-09-04 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"k-vrc-vector-cozmo-2\",\n  \"title\": \"🤖 机器人眼睛动画的实现 2\",\n  \"date\": \"2021-09-04 16:34:10\",\n  \"author\": \"Ubug\",\n  \"description\": \"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"整理\", \"思考\"],\n  \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u4E00\\u4E2A\\u5DF2\\u7ECF\\u6709\\u521D\\u6B65\\u601D\\u8DEF\\u7684\\u95EE\\u9898\\uFF0C\\u600E\\u4E48\\u518D\\u8FDB\\u4E00\\u6B65\\u5B9E\\u73B0\\u6211\\u4EEC\\u7684\\u76EE\\u6807\\u5F62\\u6001\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u3007\\u3001\\u4E0A\\u56DE\\u4E66\\u8BF4\\u5230\"), mdx(\"p\", null, \"\\u4E0A\\u4E00\\u7BC7\\u6587\\u7AE0\\u5199\\u4E86\\u5B9E\\u73B0\\u9759\\u6001\\u7684\\u56FE\\u50CF\\u4E86\\uFF0C\\u4E0D\\u8FC7\\u5B98\\u65B9\\u7684\\u5F00\\u6E90\\u4E2D\\u8FD8\\u5305\\u542B\\u4E86\\u4E00\\u4E2A\\u52A8\\u753B\\u7684\\u8D44\\u6E90\\uFF0C\\u591A\\u8FBE\\u4E00\\u5343\\u591A\\u4E2A\\u52A8\\u753B\\uFF0C\\u8FD9\\u7BC7\\u6587\\u7AE0\\u5199\\u5199\\u600E\\u4E48\\u5B9E\\u73B0\\u8FD9\\u4E2A\\u52A8\\u753B\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"374px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/55a4f4fadfe744cf40309097b00d7fbd/11a2a/anims.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"66.40926640926641%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHZEtFJD//EABkQAAIDAQAAAAAAAAAAAAAAAAABAhAREv/aAAgBAQABBQK0+pGH/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAABAxAf/aAAgBAQAGPwKqmv8A/8QAGxAAAwACAwAAAAAAAAAAAAAAAAEREDEhYZH/2gAIAQEAAT8he3yRtVNk7eExIJRTD//aAAwDAQACAAMAAAAQx8//xAAXEQEAAwAAAAAAAAAAAAAAAAABEBEx/9oACAEDAQE/EErY/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFRcfH/2gAIAQEAAT8QoA6HggKJB2Z5Pnh2xTc9qWI4XYhZ/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"anims\",\n    \"title\": \"anims\",\n    \"src\": \"/static/55a4f4fadfe744cf40309097b00d7fbd/11a2a/anims.jpg\",\n    \"srcSet\": [\"/static/55a4f4fadfe744cf40309097b00d7fbd/fca29/anims.jpg 259w\", \"/static/55a4f4fadfe744cf40309097b00d7fbd/11a2a/anims.jpg 374w\"],\n    \"sizes\": \"(max-width: 374px) 100vw, 374px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"\\u4E00\\u3001\\u52A8\\u753B\\u6587\\u4EF6\\u7684\\u53C2\\u6570\"), mdx(\"p\", null, \"\\u5148\\u770B\\u4E00\\u4E2A\\u52A8\\u753B\\u7684\\u63A7\\u5236\\u6570\\u636E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"{\\n  \\\"anim_attention_lookatdevice_01\\\": [\\n    {\\n      \\\"durationTime_ms\\\": 66,\\n      \\\"triggerTime_ms\\\": 0,\\n      \\\"Name\\\": \\\"LiftHeightKeyFrame\\\",\\n      \\\"heightVariability_mm\\\": 0,\\n      \\\"height_mm\\\": 32\\n    },\\n    {\\n      \\\"angleVariability_deg\\\": 0,\\n      \\\"angle_deg\\\": 0,\\n      \\\"triggerTime_ms\\\": 0,\\n      \\\"Name\\\": \\\"HeadAngleKeyFrame\\\",\\n      \\\"durationTime_ms\\\": 66\\n    },\\n    {\\n      \\\"Name\\\": \\\"ProceduralFaceKeyFrame\\\",\\n      \\\"faceScaleY\\\": 0.9664786143465788,\\n      \\\"scanlineOpacity\\\": 1.0,\\n      \\\"faceScaleX\\\": 0.8656703051258197,\\n      \\\"leftEye\\\": [ 8.107326060759803, 0.0, 1.72115997174465, 1.1453089027930028, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n      \\\"faceAngle\\\": 0.0,\\n      \\\"durationTime_ms\\\": 0,\\n      \\\"faceCenterY\\\": 0.0,\\n      \\\"faceCenterX\\\": 0.0,\\n      \\\"rightEye\\\": [ -7.315991464547729, 0.0, 1.72115997174465, 1.144941064931666, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n      \\\"triggerTime_ms\\\": 0\\n    },\\n    {\\n      \\\"eventGroups\\\": [{\\n        \\\"probabilities\\\": [1.0],\\n        \\\"audioName\\\": [\\\"Play__Robot_Vic_Sfx__Head_Up_Short\\\"],\\n        \\\"eventIds\\\": [2451569527],\\n        \\\"volumes\\\": [1.0]\\n      }],\\n      \\\"triggerTime_ms\\\": 66,\\n      \\\"Name\\\": \\\"RobotAudioKeyFrame\\\"\\n    },\\n    {\\n      \\\"Right\\\": [ 0.0, 0.0, 0.0, 0.0],\\n      \\\"Name\\\": \\\"BackpackLightsKeyFrame\\\",\\n      \\\"durationTime_ms\\\": 66,\\n      \\\"Back\\\": [ 0.0, 0.0, 0.0, 0.0],\\n      \\\"Middle\\\": [ 0.0, 0.0, 0.0, 0.0],\\n      \\\"Front\\\": [ 0.0, 0.0, 0.0, 0.0],\\n      \\\"triggerTime_ms\\\": 0,\\n      \\\"Left\\\": [ 0.0, 0.0, 0.0, 0.0\\n      ]\\n    },\\n    {\\n      \\\"durationTime_ms\\\": 99,\\n      \\\"speed\\\": -2,\\n      \\\"triggerTime_ms\\\": 66,\\n      \\\"Name\\\": \\\"BodyMotionKeyFrame\\\",\\n      \\\"radius_mm\\\": 1\\n    }\\n  ]\\n}\\n\")), mdx(\"p\", null, \"\\u5927\\u6982\\u80FD\\u5206\\u6790\\u6709\\u591A\\u79CD\\u7C7B\\u578B\\u7684\\u63A7\\u5236\\uFF0C\\u4EE5 ms \\u4E3A\\u5355\\u4F4D\\u6392\\u5E03\\uFF0C\\u80FD\\u63A7\\u5236\\u591A\\u79CD\\u7C7B\\u578B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"FaceAnimationKeyFrame   // \\u8868\\u60C5\\u63A7\\u5236\\u5173\\u952E\\u5E27\\nProceduralFaceKeyFrame  // \\u7A0B\\u5E8F\\u8868\\u60C5\\u5173\\u952E\\u5E27\\nRobotAudioKeyFrame      // \\u58F0\\u97F3\\u5173\\u952E\\u5E27\\nBackpackLightsKeyFrame  // \\u80CC\\u90E8\\u706F\\u5149\\u5173\\u952E\\u5E27\\nLiftHeightKeyFrame      // \\u624B\\u90E8\\u9AD8\\u5EA6\\u5173\\u952E\\u5E27\\nBodyMotionKeyFrame      // \\u8EAB\\u4F53\\u8FD0\\u52A8\\u5173\\u952E\\u5E27\\nHeadAngleKeyFrame       // \\u5934\\u90E8\\u89D2\\u5EA6\\u5173\\u952E\\u5E27\\n\")), mdx(\"p\", null, \"\\u6211\\u4EEC\\u8FD9\\u91CC\\u5173\\u5FC3\\u7684\\u5C31\\u662F\\u8868\\u60C5\\u63A7\\u5236\\u548C\\u7A0B\\u5E8F\\u8868\\u60C5\\u5173\\u952E\\u5E27\\uFF0C\\u5728\\u7A0B\\u5E8F\\u91CC\\u9762\\u88AB\\u79F0\\u4E3A\\uFF1A\\u52A8\\u753B\\u7247\\u6BB5 (animClip)\\n\\u548C\\u5E8F\\u5217\\u5E27\\u52A8\\u753B (spriteSequence)\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u52A8\\u753B\\u7247\\u6BB5\\u63A8\\u65AD\\u51FA\\u51C6\\u786E\\u7ED8\\u5236\"), mdx(\"p\", null, \"\\u770B\\u4E0B\\u5173\\u952E\\u5E27\\u7684\\u53C2\\u6570\\uFF0C\\u5C31\\u4F1A\\u53D1\\u73B0\\u548C\\u4E0A\\u4E00\\u7BC7\\u6587\\u7AE0\\u8BF4\\u7684 pose \\u5E94\\u8BE5\\u662F\\u540C\\u4E00\\u5957\\u6570\\u636E\\uFF0C\\u53EA\\u9700\\u8981\\u7565\\u52A0\\u8F6C\\u6362\\u5C31\\u80FD\\u7528\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"Name\\\": \\\"ProceduralFaceKeyFrame\\\",\\n  \\\"faceScaleY\\\": 0.9664786143465788,\\n  \\\"scanlineOpacity\\\": 1.0,\\n  \\\"faceScaleX\\\": 0.8656703051258197,\\n  \\\"leftEye\\\": [ 8.107326060759803, 0.0, 1.72115997174465, 1.1453089027930028, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n  \\\"faceAngle\\\": 0.0,\\n  \\\"durationTime_ms\\\": 0,\\n  \\\"faceCenterY\\\": 0.0,\\n  \\\"faceCenterX\\\": 0.0,\\n  \\\"rightEye\\\": [ -7.315991464547729, 0.0, 1.72115997174465, 1.144941064931666, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n  \\\"triggerTime_ms\\\": 0\\n}\\n\")), mdx(\"p\", null, \"\\u5177\\u4F53\\u8FD9\\u4E9B\\u53C2\\u6570\\u7684\\u542B\\u4E49\\u80FD\\u591F\\u5728 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/digital-dream-labs/vector/blob/7a2761097f4d8a545d6db91b0a97bd632d8336f8/cannedAnimLib/proceduralFace/proceduralFace.cpp#L90\"\n  }, \"\\u8FD9\\u91CC\"), \" \\u627E\\u5230\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1b1c15fa4604895405ea1b0d0adaa78d/fda45/face-keyframe.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.98455598455598%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB1klEQVQoz22S666bMBCE8/5v2J5wvxuwwQZsEuVMZ03Snh9FGoGs9bczu9z23cEvFeyQQndf0CpF1/6OKqtf6PsEE89EI6VYZ3SJzbZYeW+ecoRjALAC3wa38wxYTY+6vKNvMjR1ipLfDb9Xt6BWI0atYZ2Bc5rQOkoNFTY349ivs3lusK4jbo/Hk8U7srxE3XSo6pbOGig1QR5lPNo5QK8e87IhSXPcE1FG9wqTtijbCdqsWNZNgA9Ya5EXJV21BDYEX9J0psyOXhO27tAL6/KczQuCM7qamcJj0A7P5xPCuoXzZJQNRUlg26F+Az8NBNjp4w10PC8ILZASOBFoNw/DRgI7ybod3jOyQ5bl0V1ZVVQdL1R89/OOZj4wLTtmY+O5uPu6JxjHEYtjM70SeF5A7wPc9sMh3YkzeUujcTn+7zC7Itvdx1FEhxJZHDpelKI6zrCOTkXS8QOMDnlRkoiSJCVQwxE4Gcfad2Qfzujk31JqtN3l9APsuWljD26Ro/m7lAu4HYGNHEJ4RxayLCUC2zYuRdwNg8Lr9cJgDi7m4DYP/o9XkuwdWWa40aFhI8+kccs+hOu3+RFZoHJp42zV4iNQHPaTjQ7T7FLX9REmMxSOAP8AcPo6lmU8VKEAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"face keyframe\",\n    \"title\": \"face keyframe\",\n    \"src\": \"/static/1b1c15fa4604895405ea1b0d0adaa78d/0dc48/face-keyframe.png\",\n    \"srcSet\": [\"/static/1b1c15fa4604895405ea1b0d0adaa78d/2c191/face-keyframe.png 259w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/86b01/face-keyframe.png 518w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/0dc48/face-keyframe.png 1035w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/aae66/face-keyframe.png 1553w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/1c66b/face-keyframe.png 2070w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/fda45/face-keyframe.png 2092w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u9ED8\\u8BA4\\u503C\\u548C\\u542B\\u4E49\\u90FD\\u662F\\u548C json \\u6587\\u4EF6\\u4E2D\\u7684\\u53C2\\u6570\\u90FD\\u662F\\u4E00\\u4E00\\u5BF9\\u5E94\\u7684\\uFF0C\\u800C\\u4E14\\u63D0\\u4F9B\\u4E86\\u66F4\\u8BE6\\u7EC6\\u7684\\u53C2\\u6570\\u7C7B\\u578B\\u548C\\u8BA1\\u7B97\\u65B9\\u6CD5\\uFF0C\\u6BD4\\u5982\\u773C\\u775B\\u7684\\u4F4D\\u7F6E\\u662F\\u548C\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u53C2\\u6570\\u4F4D\\u7F6E\\u76F8\\u52A0\\u7684\\u503C\\uFF0C\\u8303\\u56F4\\u5728\\u5BBD\\u5EA6\\u7684\\u4E00\\u534A\\u4E4B\\u95F4\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"// \\u6BD4\\u5982\\ndrawEyeX = neutralEyeX + [\\u914D\\u7F6E\\u7684\\u53C2\\u6570]\\n\")), mdx(\"p\", null, \"\\u800C\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u5728 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/digital-dream-labs/vector/blob/7a2761097f/animProcess/src/cozmoAnim/animation/animationStreamer.cpp#L404\"\n  }, \"\\u8FD9\\u91CC\"), \" \\u53EF\\u4EE5\\u627E\\u5230\\u540D\\u79F0\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/72e316ec0f89368392081a02d1b47b88/02a99/neutral-face.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"25.86872586872587%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABYlAAAWJQFJUiTwAAABBklEQVQY0y2PCW6DMBQFuf/9qmxNs0GaAN4XbCBMDaql0XvWt0d2pbVkzjfuvwfuzY5Xe8Lbb5z6wpsDUqzs0eqAKajSRb8j2CNTujIOly2nkst4ozLWMc/Q1JKfuuf6lLS95lE/OV8bjnfBqTZcyvz8EOwvHbenRppIJz3v3hXstv98oFLGwmdG9z2vTtF3Le37Tdd11E1TLhlsnHAh4WJGuowbZmLKDDEQo8dazTSNrKty3rMsC8kFtAmEmFDaIqRGCIkxRVh+4ZwjhDIPvnRbRAE/TJvcxJkh/Qt9ObQKnR8QOqJcyfL8VkWEMkVu6FTAWE8eR3IeSTkzrn2cN1JhmuZN+AcDXn2II/BasgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"neutral face\",\n    \"title\": \"neutral face\",\n    \"src\": \"/static/72e316ec0f89368392081a02d1b47b88/0dc48/neutral-face.png\",\n    \"srcSet\": [\"/static/72e316ec0f89368392081a02d1b47b88/2c191/neutral-face.png 259w\", \"/static/72e316ec0f89368392081a02d1b47b88/86b01/neutral-face.png 518w\", \"/static/72e316ec0f89368392081a02d1b47b88/0dc48/neutral-face.png 1035w\", \"/static/72e316ec0f89368392081a02d1b47b88/aae66/neutral-face.png 1553w\", \"/static/72e316ec0f89368392081a02d1b47b88/02a99/neutral-face.png 1582w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u7FFB\\u4E0B\\u52A8\\u753B\\u6587\\u4EF6\\u5939\\u627E\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"anim_neutral_eyes_01\"), \" \\u62FF\\u5230\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u914D\\u7F6E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"Name\\\": \\\"ProceduralFaceKeyFrame\\\",\\n  \\\"triggerTime_ms\\\": 0,\\n  \\\"durationTime_ms\\\": 0,\\n  \\\"scanlineOpacity\\\": 1.0,\\n  \\\"faceScaleX\\\": 1.0,\\n  \\\"faceScaleY\\\": 1.0,\\n  \\\"faceCenterX\\\": 0.0,\\n  \\\"faceCenterY\\\": 0.0,\\n  \\\"faceAngle\\\": 0.0,\\n  \\\"leftEye\\\": [8.107326060759803, 0.0, 1.5174507300664741, 1.1453089027930028, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0],\\n  \\\"rightEye\\\": [-7.315991464547729, 0.0, 1.5174507300664741, 1.144941064931666, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0]\\n}\\n\")), mdx(\"p\", null, \"\\u6BD4\\u7167\\u7740\\u4E0A\\u9762\\u7684\\u53C2\\u6570\\u542B\\u4E49\\uFF0C\\u52A0\\u4E0A\\u4E00\\u70B9\\u70B9\\u7684\\u7FFB\\u770B\\u6E90\\u7801\\uFF0C\\u6211\\u4EEC\\u80FD\\u591F\\u77E5\\u9053\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u4E0B\\u7684\\u5404\\u4E2A\\u53C2\\u6570\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// \\u6574\\u4E2A\\u9762\\u90E8\\u5C3A\\u5BF8\\nFACE_DISPLAY_WIDTH = 184\\nFACE_DISPLAY_HEIGHT = 96\\n// \\u5355\\u4E2A\\u773C\\u775B\\u5927\\u5C0F\\nNominalEyeHeight = 57\\nNominalEyeWidth = 43\\n// \\u4E24\\u4E2A\\u773C\\u775B\\u95F4\\u8DDD\\u5927\\u5C0F\\nkProcFace_NominalEyeSpacing = 92\\n\\n// \\u6839\\u636E\\u95F4\\u8DDD\\u8BA1\\u7B97\\u4E24\\u4E2A\\u773C\\u775B\\u7684\\u7EDD\\u5BF9\\u4F4D\\u7F6E\\nconst NominalLeftEyeX = (FACE_DISPLAY_WIDTH - kProcFace_NominalEyeSpacing) / 2;\\nconst NominalRightEyeX = NominalLeftEyeX + kProcFace_NominalEyeSpacing;\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5927\\u81F4\\u80FD\\u770B\\u51FA\\u6765\\u52A8\\u753B Clip \\u7684\\u5B9E\\u73B0\\u624D\\u662F\\u6574\\u4E2A\\u8868\\u60C5\\u7684\\u6838\\u5FC3\\uFF0C\\u4E4B\\u524D\\u7684 POSE \\u7684\\u5B9E\\u73B0\\u4E5F\\u662F\\u6765\\u81EA\\u4E8E\\u6B64\\u3002\")), mdx(\"p\", null, \"\\u6709\\u4E86\\u8FD9\\u4E9B\\u53C2\\u6570\\uFF0C\\u6E90\\u7801\\u91CC\\u9762\\u4E5F\\u6709\\u5176\\u4ED6\\u5706\\u89D2\\u7684\\u5B9E\\u73B0\\uFF0C\\u8FD9\\u91CC\\u6211\\u4EEC\\u5C31\\u53EF\\u4EE5\\u91CD\\u6784\\u51FA\\u4E00\\u7248\\u51C6\\u786E\\u7ED8\\u5236\\u7684\\u5B9E\\u73B0\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"drawFace = (\\n  ctrls: EyesControls,\\n  blink: BlinkParams = { x: 1, y: 1 },\\n) {\\n  // \\u6E05\\u7A7A\\u753B\\u5E03\\n  this.scope.project.clear();\\n\\n  // \\u65B0\\u5EFA\\u56FE\\u5C42\\n  new this.scope.Layer();\\n  // \\u521B\\u5EFA\\u65B0\\u7684\\u77E9\\u5F62\\u4EE5\\u4FBF\\u7ED8\\u5236\\u6837\\u5F0F\\n  const rect = new this.scope.Rectangle(\\n    FACE_DISPLAY_WIDTH,\\n    FACE_DISPLAY_HEIGHT\\n  );\\n  new this.scope.Path.Rectangle(rect);\\n\\n  // \\u65B0\\u5EFA\\u56FE\\u5C42\\n  const activeLayer = new this.scope.Layer();\\n\\n  // \\u7ED8\\u5236\\u4E24\\u4E2A\\u773C\\u7684\\u5F62\\u72B6\\n  this.genEyeShape(ctrls.left, blink);\\n  this.genEyeShape(ctrls.right, blink);\\n\\n  // \\u65BD\\u52A0\\u7F29\\u653E\\u3001\\u65CB\\u8F6C\\u548C\\u53D8\\u5F62\\u7684\\u64CD\\u4F5C\\n  activeLayer.scale(ctrls.FaceScaleX, ctrls.FaceScaleY);\\n  activeLayer.rotate(ctrls.FaceAngle);\\n  activeLayer.translate(...);\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"genEyeShape(ctrl: EyeControls, blink: BlinkParams = { x: 1, y: 1 }) {\\n  // ... \\u83B7\\u53D6\\u57FA\\u672C\\u53C2\\u6570\\n\\n  // ========== \\u773C\\u7751\\n  const newLidClip = new this.scope.Path();\\n  const lidFix = new this.scope.Point(EyeCenterX - halfEyeWidth, EyeCenterY - halfEyeHeight);\\n\\n  const upperYAdj = halfEyeWidth * Math.tan((Math.PI / 180) * UpperLidAngle);\\n  const upperYRad = -UpperLidBend * eyeHeight;\\n  const upperY = -UpperLidY * eyeHeight;\\n  newLidClip.add(new this.scope.Point(-1, upperY - upperYAdj).add(lidFix));\\n  newLidClip.quadraticCurveTo(\\n    new this.scope.Point(halfEyeWidth, upperYRad).add(lidFix),\\n    new this.scope.Point(eyeWidth + 1, upperY + upperYAdj).add(lidFix)\\n  );\\n\\n  //...\\u4E0B\\u773C\\u7751\\n\\n  // ========== \\u773C\\u89D2\\n  const eyeSize = [halfEyeWidth, halfEyeHeight];\\n  const cornerCalc = (v: number[]) => v.map((v, i) => v * eyeSize[i]);\\n\\n  let cornerOT = cornerCalc([ctrl.UpperOuterRadiusX, ctrl.UpperOuterRadiusY]);\\n  let cornerIT = cornerCalc([ctrl.UpperInnerRadiusX, ctrl.UpperInnerRadiusY]);\\n  let cornerIB = cornerCalc([ctrl.LowerInnerRadiusX, ctrl.LowerInnerRadiusY]);\\n  let cornerOB = cornerCalc([ctrl.LowerOuterRadiusX, ctrl.LowerOuterRadiusY]);\\n\\n  const newEye = new this.scope.Path();\\n\\n  // \\u5DE6\\u4E0A\\u5706\\u89D2\\uFF0C\\u4ECE\\u5DE6\\u8FB9\\u753B\\u5706\\u5F27\\u5230\\u4E0A\\u8FB9\\n  newEye.add(new this.scope.Point(0, cornerOT[1]));\\n  newEye.quadraticCurveTo(\\n    new this.scope.Point(0, 0),\\n    new this.scope.Point(cornerOT[0], 0)\\n  );\\n\\n  //... \\u5176\\u4ED6\\u7684\\u5706\\u89D2\\n\\n  newEye.closed = true;\\n  newEye.position = new this.scope.Point(ctrl.EyeCenterX, ctrl.EyeCenterY);\\n\\n  // ====================== \\u773C\\u775B\\u548C\\u773C\\u7751\\u7684\\u4EA4\\u96C6\\n  const eyeIntersect = newLidClip.intersect(newEye, { insert: true });\\n\\n  // \\u83B7\\u53D6\\u4EA4\\u96C6\\u4E4B\\u540E\\uFF0C\\u4E4B\\u524D\\u7684\\u5F62\\u72B6\\u5220\\u9664\\n  newLidClip.remove();\\n  newEye.remove();\\n\\n  // ====================== \\u773C\\u775B\\u7684\\u53D8\\u6362\\n  eyeIntersect.scale(\\n    ctrl.EyeScaleX * (blink.x || 1),\\n    ctrl.EyeScaleY * (blink.y || 1)\\n  );\\n  eyeIntersect.rotate(-ctrl.EyeAngle);\\n\\n  // ====================== \\u77B3\\u5B54\\n  const pupil = new this.scope.Path.Circle(\\n    new this.scope.Point(\\n      ctrl.HotSpotCenterX * halfEyeWidth + halfEyeWidth,\\n      -ctrl.HotSpotCenterY * halfEyeWidth + halfEyeHeight\\n    ),\\n    this.globalConf.pupilSize / 2\\n  );\\n  pupil.position = new this.scope.Point(ctrl.EyeCenterX, ctrl.EyeCenterY);\\n\\n  // ====================== \\u77B3\\u5B54\\u4E0E\\u773C\\u775B\\u7684\\u4EA4\\u96C6\\n  const pupilCliper = eyeIntersect.clone();\\n  const pupilIntersect = pupilCliper.intersect(pupil, { insert: true });\\n\\n  pupil.remove();\\n  pupilCliper.remove();\\n\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u662F\\u6838\\u5FC3\\u7684\\u7ED8\\u5236\\u90E8\\u5206\\uFF08\\u53BB\\u6389\\u4E86\\u975E\\u6838\\u5FC3\\u7684\\u6837\\u5F0F\\u4E4B\\u7C7B\\u7684\\uFF09\\uFF0C\\u6700\\u540E\\u80FD\\u83B7\\u5F97\\u6211\\u4EEC\\u60F3\\u8981\\u7684\\u5B98\\u65B9\\u7684\\u7ED8\\u5236\\u903B\\u8F91\\uFF0C\\u66F4\\u597D\\u7684\\u662F\\u6211\\u4EEC\\u8FD9\\u662F\\u77E2\\u91CF\\u7684\\u7ED8\\u5236\\uFF0C\\u53EF\\u4EE5\\u505A\\u66F4\\u597D\\u73A9\\u7684\\u6548\\u679C\\uFF0C\\u6BD4\\u5982\\u63CF\\u8FB9\\u800C\\u4E0D\\u662F\\u586B\\u5145\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"378px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3404b4ec61e3679a7a9bf3888d8804fd/15df2/line-style.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"50.965250965250966%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABoklEQVQoz62S3VLCMBCFN0lbAggUWiiggCBq/UOh4OgzcAHM8PcmPAXPfNykTEGvvdjJZpN8OWcTOh6PmM/n2O332Gy2HBsb6/U6y//G37XtbofFYoHD4QAyMCL6l4jjGLRjupnkHl/g3D9BNSJIrSG5pjjsKASUlL9qUimosAGn24f3+mEZs9kUtF6t7MR5eQf5NYjhI9zxDO70G9QdgKIWKKdBDCUGUPsG6mMKb/oF+fAMCupQ8SuoWEIyGjFwuQRJBw6DDNjLa3jlMnJhHW6nx9A+BB8Qb2PQMIZioG624Jo9pSt7RjbboGqA5N0AVwwULJ/tmsV8FGU90b5vR3F7B2kUGyeOglsspm0KQkhWLo2LWv0CKBl4UmhvrlahgwCqUEiBvQHE+NNaF9w7HYbw+LJctXahMLxUKOGYPpyUSSkgLl5PDB7Y8gSk81lNMTjL2QGV/bSH5h9ZK88jCGO7dQ1qnoJzwY8luG9UrqQq2x2u89yo4tGoV6PEMpLJ5Ay0N9ZCUKMFEaVhcqr4579W4EdoNLN1u4dfXnpeCkwS/ADR9/+DiwcPFwAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"line style\",\n    \"title\": \"line style\",\n    \"src\": \"/static/3404b4ec61e3679a7a9bf3888d8804fd/15df2/line-style.png\",\n    \"srcSet\": [\"/static/3404b4ec61e3679a7a9bf3888d8804fd/2c191/line-style.png 259w\", \"/static/3404b4ec61e3679a7a9bf3888d8804fd/15df2/line-style.png 378w\"],\n    \"sizes\": \"(max-width: 378px) 100vw, 378px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"ps: \\u7ED8\\u5236\\u8F6C\\u4E3A\\u77E2\\u91CF svg \\u7684\\u65F6\\u5019\\uFF0C\\u60F3\\u8981\\u4E24\\u4E2A\\u8DEF\\u5F84\\u7684\\u4EA4\\u96C6\\u4F46\\u662F\\u8BA1\\u7B97\\u4F1A\\u5F88\\u590D\\u6742\\uFF0C\\u7B80\\u5355\\u67E5\\u8BE2\\u540E\\u53D1\\u73B0 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://paperjs.org/\"\n  }, \"paper.js\"), \" \\u5F88\\u5F3A\\u5927\\uFF0C\\u5904\\u7406 svg \\u4EA4\\u96C6\\u5F88\\u65B9\\u4FBF\\uFF0C\\u6700\\u540E\\u5B9E\\u73B0\\u6548\\u679C\\u5F88\\u4E0D\\u9519\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u5BF9\\u4E1A\\u52A1\\u7684\\u542F\\u793A\\uFF1A\\u968F\\u7740\\u8C03\\u7814\\u548C\\u5B9E\\u73B0\\u7684\\u6DF1\\u5165\\uFF0C\\u4E1A\\u52A1\\u7EC6\\u8282\\u7684\\u4E86\\u89E3\\uFF0C\\u627E\\u5230\\u4E86\\u76F8\\u5BF9\\u66F4\\u597D\\u7684\\u5207\\u5165\\u70B9\\uFF0C\\u6240\\u4EE5\\u91CD\\u6784\\u4E5F\\u662F\\u4E3A\\u4E86\\u66F4\\u597D\\u7684\\u5B9E\\u73B0\\u4E1A\\u52A1\\uFF0C\\u65B9\\u4FBF\\u540E\\u7EED\\u66F4\\u9AD8\\u7EA7\\u7684\\u6269\\u5C55\\u3002\")), mdx(\"h2\", null, \"\\u4E09\\u3001\\u52A8\\u753B\\u7247\\u6BB5\\u7684\\u5B9E\\u73B0\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u4E00\\u8282\\u867D\\u7136\\u662F\\u5728\\u7814\\u7A76\\u52A8\\u753B\\u7247\\u6BB5\\uFF0C\\u4F46\\u662F\\u66F4\\u591A\\u7684\\u662F\\u6839\\u636E\\u52A8\\u753B\\u7247\\u6BB5\\u7684\\u53C2\\u6570\\u91CD\\u6784\\u7ED8\\u5236\\u903B\\u8F91\\u3002\\u4E0B\\u9762\\u5C42\\u7231\\u662F\\u52A8\\u753B\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u518D\\u6DF1\\u5165\\u8C03\\u7814\\u4E0B\\u52A8\\u753B\\u6587\\u4EF6\\uFF0C\\u80FD\\u591F\\u5F97\\u51FA\\u51E0\\u4E2A\\u7ED3\\u8BBA\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"triggerTime_ms \\u662F\\u52A8\\u753B\\u7684\\u65F6\\u95F4\\u4FE1\\u606F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5173\\u952E\\u5E27\\u662F\\u4E00\\u5957\\u8868\\u60C5\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728\\u89C4\\u5B9A\\u7684\\u65F6\\u95F4\\u7ED8\\u5236\\u8FD9\\u4E2A\\u8868\\u60C5\\u5373\\u53EF\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7ED8\\u5236\\u65F6\\u95F4\\u90FD\\u662F 33 \\u7684\\u500D\\u6570\\uFF0C\\u4E5F\\u5C31\\u662F 30 fps \\u7684\\u52A8\\u753B\")), mdx(\"p\", null, \"\\u6240\\u4EE5\\u505A\\u4E00\\u4E2A\\u65F6\\u95F4\\u7BA1\\u7406\\u5668\\uFF0C30fps \\u7684\\u5E27\\u7387\\u8C03\\u7528\\u7ED8\\u5236\\uFF0C\\u5728\\u76F8\\u5E94\\u7684\\u89E6\\u53D1\\u65F6\\u95F4\\u89E6\\u53D1\\u5BF9\\u5E94\\u7684\\u7ED8\\u5236\\u5C31\\u5B9E\\u73B0\\u4E86\\u52A8\\u753B\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5148\\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u7684 FPS \\u65F6\\u95F4\\u63A7\\u5236\\u5668\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import { getUUID } from \\\"./uuid\\\";\\n\\nexport class Ticker {\\n  constructor(){\\n    this.fps = 30\\n\\n    this.then = Date.now()\\n    this.interval = 1000 / this.fps;\\n    this.globalFrame = 0\\n  }\\n  runner: number = -1\\n  drawers: { [i: string]: () => void } = {}\\n\\n  registDrawers = (func: () => void, name?: string): () => void => {\\n    const uid = name || getUUID()\\n    this.drawers[uid] = func\\n\\n    if (this.runner) cancelAnimationFrame(this.runner)\\n    this.globalTick();\\n\\n    return () => {\\n      if (this.drawers[uid]) delete this.drawers[uid]\\n    }\\n  }\\n\\n  afterOneFrame = (func: () => void) => {\\n    const uid = getUUID()\\n    this.drawers[uid] = () => {\\n      func()\\n      if (this.drawers[uid]) delete this.drawers[uid]\\n    }\\n    if (this.runner) cancelAnimationFrame(this.runner)\\n    this.globalTick();\\n  }\\n\\n  pause() {\\n    if (this.runner) cancelAnimationFrame(this.runner)\\n  }\\n  stop(){\\n    if (this.runner) cancelAnimationFrame(this.runner)\\n    for (const key in this.drawers) {\\n      if (Object.prototype.hasOwnProperty.call(this.drawers, key)) {\\n        delete this.drawers[key];\\n      }\\n    }\\n  }\\n  resume() {\\n    if (this.runner) cancelAnimationFrame(this.runner)\\n    this.globalTick();\\n  }\\n  realFPS = 30\\n  fps = 30\\n  then = Date.now()\\n  interval;\\n  globalFrame = 0\\n  globalTick = () => {\\n    let now = Date.now();\\n    let delta = now - this.then;\\n    if (delta > this.interval) {\\n      this.realFPS = 1000 / delta\\n      this.globalFrame++\\n      this.then = now - (delta % this.interval);\\n\\n      for (const key in this.drawers)\\n        if (Object.prototype.hasOwnProperty.call(this.drawers, key))\\n          this.drawers[key]()\\n    }\\n    this.runner = requestAnimationFrame(this.globalTick);\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u7F51\\u4E0A\\u4E5F\\u80FD\\u627E\\u5230\\u73B0\\u6210\\u7684\\u9879\\u76EE\\uFF0C\\u4E0D\\u8FC7\\u4E5F\\u5C31\\u662F\\u6839\\u636E FPS \\u63A7\\u5236\\u6BCF\\u4E00\\u5E27\\u7684\\u8FD0\\u884C\\u65F6\\u673A\\uFF0C\\u7136\\u540E\\u589E\\u52A0\\u4E00\\u5806\\u8F85\\u52A9\\u673A\\u5236\\u5E2E\\u52A9\\u8FD0\\u884C\\u63A7\\u5236\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u5C31\\u662F\\u904D\\u5386\\u5173\\u952E\\u5E27\\u6309\\u7167\\u987A\\u5E8F\\u6267\\u884C\\u7ED8\\u5236\\u4E86\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u540E\\u7EED\\u8FD8\\u6DFB\\u52A0\\u4E86\\u5E8F\\u5217\\u5E27\\u3001\\u4E8B\\u4EF6\\u7B49\\u903B\\u8F91\\u7684\\u5B9E\\u73B0\\uFF0C\\u6240\\u4EE5\\u8FD9\\u4E2A\\u4E0D\\u662F\\u6700\\u7EC8\\u7248\\uFF01\\uFF01\\uFF01\\u53EA\\u662F\\u793A\\u610F\\nrunAniKeyFrames(keyframes: AniKeyFrame[]) {\\n  // \\u8BA1\\u7B97\\u603B\\u5E27\\u6570\\uFF08\\u5305\\u62EC\\u5173\\u952E\\u5E27\\u548C\\u5E8F\\u5217\\u5E27\\uFF09\\n  let totalFrames = -Infinity;\\n  keyframes.forEach((keyframe) => {\\n    if (keyframe.Name === \\\"ProceduralFaceKeyFrame\\\") {\\n      totalFrames = Math.max(\\n        totalFrames,\\n        msToFrame(keyframe.triggerTime_ms + keyframe.durationTime_ms)\\n      );\\n    }\\n  });\\n\\n  // \\u5E27\\u6570\\u5FAA\\u73AF\\u4F53\\n  const runFrame = (frameIndex: number) => {\\n    // \\u67E5\\u627E\\u5173\\u952E\\u5E27\\u4E2D\\u662F\\u5426\\u6709\\u7B26\\u5408\\u65F6\\u95F4\\u7684\\u5E27\\n    const matchFrames = keyframes.filter((frame) =>\\n      msIsFrame(frame.triggerTime_ms, frameIndex)\\n    );\\n    // \\u5982\\u679C\\u6709\\uFF0C\\u90A3\\u4E48\\u64AD\\u653E\\u8FD9\\u4E9B\\u5E27\\n    if (matchFrames.length > 0) {\\n      matchFrames.forEach((frame) => {\\n        if (frame.Name === \\\"ProceduralFaceKeyFrame\\\") {\\n          // \\u63A7\\u5236\\u53C2\\u6570\\u7684\\u5E27\\n          const controls = applyKeyFrameOnControls(frame, this.globalConf);\\n          this.applyControls(controls, undefined, \\\"frame\\\");\\n        }\\n      });\\n    }\\n    if (frameIndex >= totalFrames) dispose();\\n  };\\n\\n  // \\u5F00\\u59CB\\u5FAA\\u73AF\\n  let globalFrameSave = this.ticker.globalFrame;\\n  dispose = this.ticker.registDrawers(() => {\\n    runFrame(this.ticker.globalFrame - globalFrameSave);\\n  });\\n  runFrame(0);\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u7684\\u8BDD\\u5C31\\u5B9E\\u73B0\\u4E86\\u6700\\u57FA\\u672C\\u7684\\u5173\\u952E\\u5E27\\u64AD\\u653E\\u4E86\\uFF1A\"), mdx(\"video\", {\n    controls: true,\n    style: {\n      maxWidth: '100%'\n    },\n    src: \"/ani-5939318b6d5ca5a5441e632d4dffcba2.mp4\"\n  }), mdx(\"h3\", null, \"\\u56DB\\u3001\\u5E8F\\u5217\\u5E27\\u52A8\\u753B\"), mdx(\"p\", null, \"\\u5E8F\\u5217\\u5E27\\u76F8\\u6BD4\\u4E4B\\u4E0B\\u66F4\\u7B80\\u5355\\uFF0C\\u56E0\\u4E3A\\u5E8F\\u5217\\u5E27\\u7684\\u52A8\\u753B\\u662F\\u9884\\u8BBE\\u597D\\u7684\\u4E00\\u5E27\\u5E27\\u7684\\u753B\\u9762\\uFF0C\\u53EA\\u8981\\u6BCF\\u4E00\\u5E27\\u5C55\\u793A\\u4E00\\u4E0B\\u52A8\\u753B\\u5373\\u53EF\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/fa9d90baedd117ca41233bea56268455/09c70/sprites.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"64.86486486486486%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC70lEQVQ4y5WSS0yUVxTHrxttYkw0aSUhxriwRmtqdIMkbizu0EA0atr6TFu7aDfF7psYUkWRqoAxkkI0hYlWJOKDD5RShJgiTJrGARSZGTMvlIFx3t9jHvx677UuTLrxJCfnfOfe///733OOyCYy2GmLxFycmUCE0Isg/ud+nZvJLPHoax3VvVehlzq+lrW8mSM5nyAVS5KNp7FSps5FPpfHtmysrEU2LYHpjI5m1sQyLXnm4EhXuWM7FJw8FIrknZys29imrTGZVAYzYyJ4T4slEjT+fot/nniYmBjH7Xbz9NlTotEoSXkmUqkUl39tpfH8eZouXKC+7hRX29owDIMzZ+vpGxzk+s0uamtr8Xg8mnQ6ECSVThObnycej5PL5XS9KF3Mzs2xdPkKhBAsq9hFSdVBlm7YzAcff0Lpge/59IcTrNt/WJ+fPn1GA8PB4DuqLUu2yzR5GcsiwjMzrCot5bPvjrPrSg/HukfYXtdCec1PHOoc5ktXP5WN7YjFS/iloUETeL1eTEmwsLDwRvH0tK5FwmFEdD5GWXk5q6u+4Ktr/XzbYbC7ycXeukscae/lG1cfFQ1XtcJz/xGGJTAh+1UsFrUXCgWSySSRSASRlBPaurWM0h072dfRR40xxoYff6ak+gDVHX9Q2XqXqqbfWP7hR5w6eVITzs7OaiKl8K1K1Ue/348IBkOsLClh99Gv2bjvMOv3HGTlljJWbdzE2urPWVO5l9Xl2xCLFtHc3KzBoVBIK1Kmnq5+MCdnoaLIS7mqjz6fD68c/9T4E3xTz/DKvkzLtfBOjuN7PsWLQIB0JoPaioDMlUI9WRmVOuXq6e+9h0UJSsuVUeD/M9E7MsbQ4zHuDAwy7P6bnj8fMvDXKEOjbnqGHjEs4/0R6YMPaeu6TTAU1kDHcbQ6tTLKbNvW3+Jyt8H1e71cvHaTroEhWjtv4TIecKOvn5bObm4Y92m9bdDS7qKmvhHPxCSFfF4/XQ3k7fpkZDsU4b9NsmdJilh3cAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"sprites\",\n    \"title\": \"sprites\",\n    \"src\": \"/static/fa9d90baedd117ca41233bea56268455/0dc48/sprites.png\",\n    \"srcSet\": [\"/static/fa9d90baedd117ca41233bea56268455/2c191/sprites.png 259w\", \"/static/fa9d90baedd117ca41233bea56268455/86b01/sprites.png 518w\", \"/static/fa9d90baedd117ca41233bea56268455/0dc48/sprites.png 1035w\", \"/static/fa9d90baedd117ca41233bea56268455/09c70/sprites.png 1290w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\u8FD9\\u4E9B\\u56FE\\u7247\\u5FC5\\u987B\\u63D0\\u524D\\u52A0\\u8F7D\\uFF0C\\u5426\\u5219\\u4E00\\u5E27\\u7684\\u65F6\\u95F4\\u91CC\\u9762\\u52A0\\u8F7D\\u4F1A\\u51FA\\u73B0\\u95EA\\u73B0\\u7684\\u60C5\\u51B5\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u6839\\u636E url \\u52A0\\u8F7D\\u4E3A DataUrl\\uFF0C\\u8FD9\\u6837\\u7684\\u8BDD\\u663E\\u793A\\u8017\\u65F6\\u4E0D\\u9700\\u8981\\u7B49\\u5F85\\u7F51\\u7EDC\\nconst loadSpritesByName = async (name: string) => {\\n  if (spritesCache[name]) return spritesCache[name];\\n\\n  const sprite = sprites.find(s => s.name === name)\\n  if (sprite) {\\n    const asyncList = new Array(sprite.count).fill(0).map(async (v, i) => fetchAsDataURL(getSpriteUrl(sprite, i)))\\n    spritesCache[sprite.name] = await Promise.all(asyncList)\\n    return spritesCache[sprite.name]\\n  }\\n  return null\\n}\\n\")), mdx(\"p\", null, \"\\u7ED8\\u5236\\u56FE\\u50CF\\u7684\\u64CD\\u4F5C\\u5C31\\u4E0D\\u8D34\\u4E86\\uFF0C\\u76F4\\u63A5\\u5C55\\u793A\\u7ED3\\u679C\\uFF1A\"), mdx(\"video\", {\n    controls: true,\n    style: {\n      maxWidth: '100%'\n    },\n    src: \"/snow-cd94b2b6d8ff9a00c89eb11603ac3d57.mp4\"\n  }), mdx(\"h3\", null, \"\\u5B8C\\u7ED3\"), mdx(\"video\", {\n    controls: true,\n    style: {\n      maxWidth: '100%'\n    },\n    src: \"/all-5a5ad555506a9b397998f817cf2bd8d3.mp4\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/k_vrc\"\n  }, \"\\u673A\\u5668\\u4EBA\\u773C\\u775B\\u52A8\\u753B\\u7684\\u6F14\\u793A\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/fallback/fallback.md","id":"e7faa624-9431-587e-b5b2-ada6090e59f2","parent":{"name":"fallback","sourceInstanceName":"blog"},"excerpt":"想分享的是对于网络层可用性的一些常见端侧优化案~~ 明天和意外哪个先来临？ 没有人能说自己手中的项目能够万无一失，没人能保证千万分之一的错误率，不能被你遇到，程序崩溃，服务瘫痪的例子已经不算是新闻了，一个大型项目的上线，怎么才能保证健壮和稳定呢？ 从源头考虑，比较基础的有代码规范、强类型限制、MergeRequest…","fields":{"title":"🪂 兜底和容灾","slug":"/blog/fallback","description":"周末你和爱人吃着饭，突然一个电话过来，平台突然无法访问，数万活跃用户受到影响，你匆忙赶到公司，发现除了发版无法解决，最后紧急提交但是还是等到下周一才彻底解决，复盘发现大量用户流失。最后结论是：意外总是突如其来，你准备的越充分越能抗住","date":"2021-06-18","redirects":null,"datetime":"2021-06-18 18:13:35","categories":["code"],"series":null,"tags":["兜底和容灾"],"status":"online"},"frontmatter":{"published":null,"tags":["兜底和容灾"],"theme":null,"slug":"fallback","date":"2021-06-18 18:13:35"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"fallback\",\n  \"title\": \"🪂 兜底和容灾\",\n  \"date\": \"2021-06-18 18:13:35\",\n  \"author\": \"Ubug\",\n  \"description\": \"周末你和爱人吃着饭，突然一个电话过来，平台突然无法访问，数万活跃用户受到影响，你匆忙赶到公司，发现除了发版无法解决，最后紧急提交但是还是等到下周一才彻底解决，复盘发现大量用户流失。最后结论是：意外总是突如其来，你准备的越充分越能抗住\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"兜底和容灾\"],\n  \"banner_icon\": \"😂\",\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u5BF9\\u4E8E\\u7F51\\u7EDC\\u5C42\\u53EF\\u7528\\u6027\\u7684\\u4E00\\u4E9B\\u5E38\\u89C1\\u7AEF\\u4FA7\\u4F18\\u5316\\u6848~~\")), mdx(\"hr\", null), mdx(\"p\", null, \"\\u660E\\u5929\\u548C\\u610F\\u5916\\u54EA\\u4E2A\\u5148\\u6765\\u4E34\\uFF1F\"), mdx(\"p\", null, \"\\u6CA1\\u6709\\u4EBA\\u80FD\\u8BF4\\u81EA\\u5DF1\\u624B\\u4E2D\\u7684\\u9879\\u76EE\\u80FD\\u591F\\u4E07\\u65E0\\u4E00\\u5931\\uFF0C\\u6CA1\\u4EBA\\u80FD\\u4FDD\\u8BC1\\u5343\\u4E07\\u5206\\u4E4B\\u4E00\\u7684\\u9519\\u8BEF\\u7387\\uFF0C\\u4E0D\\u80FD\\u88AB\\u4F60\\u9047\\u5230\\uFF0C\\u7A0B\\u5E8F\\u5D29\\u6E83\\uFF0C\\u670D\\u52A1\\u762B\\u75EA\\u7684\\u4F8B\\u5B50\\u5DF2\\u7ECF\\u4E0D\\u7B97\\u662F\\u65B0\\u95FB\\u4E86\\uFF0C\\u4E00\\u4E2A\\u5927\\u578B\\u9879\\u76EE\\u7684\\u4E0A\\u7EBF\\uFF0C\\u600E\\u4E48\\u624D\\u80FD\\u4FDD\\u8BC1\\u5065\\u58EE\\u548C\\u7A33\\u5B9A\\u5462\\uFF1F\"), mdx(\"p\", null, \"\\u4ECE\\u6E90\\u5934\\u8003\\u8651\\uFF0C\\u6BD4\\u8F83\\u57FA\\u7840\\u7684\\u6709\\u4EE3\\u7801\\u89C4\\u8303\\u3001\\u5F3A\\u7C7B\\u578B\\u9650\\u5236\\u3001MergeRequest\\u3001\\u4EE3\\u7801\\u9759\\u6001\\u68C0\\u67E5\\u7B49\\u7B49\\uFF0C\\u80FD\\u591F\\u907F\\u514D\\u4E00\\u5F00\\u59CB\\u7684\\u7F16\\u7801\\u95EE\\u9898\\uFF0C\\u8FD9\\u91CC\\u4E0D\\u591A\\u8BF4\\uFF0C\\u56E0\\u4E3A\\u4F60\\u8DB3\\u591F\\u5C0F\\u5FC3\\u5C31\\u4E0D\\u4F1A\\u8BA9\\u610F\\u5916\\u51FA\\u73B0\\u5728\\u7528\\u6237\\u624B\\u4E2D\\u3002\"), mdx(\"p\", null, \"\\u54EA\\u6015\\u518D\\u5C0F\\u5FC3\\uFF0C\\u5F88\\u591A\\u610F\\u5916\\u4E5F\\u662F\\u6CA1\\u529E\\u6CD5\\u89E3\\u51B3\\uFF0C\\u6D89\\u53CA\\u5230\\u5F88\\u91CD\\u8981\\u7684\\u4F53\\u9A8C\\u95EE\\u9898\\uFF0C\\u8FD8\\u662F\\u9700\\u8981\\u4F60\\u51C6\\u5907\\u4E00\\u5957 PLAN B \\u7684\\u3002\"), mdx(\"h3\", null, \"\\u3007\\u3001\\u8BF4\\u5728\\u524D\\u9762\"), mdx(\"p\", null, \"\\u5BF9\\u4E8E\\u53EF\\u7528\\u7684\\u515C\\u5E95\\u5904\\u7406\\uFF0C\\u57FA\\u672C\\u4E0A\\u4F1A\\u51FA\\u73B0\\u4E24\\u4E2A\\u6781\\u7AEF\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u51E0\\u4E4E\\u4E0D\\u8003\\u8651\\u515C\\u5E95\\uFF0C\\u53EA\\u8981\\u5B8C\\u6210\\u4EFB\\u52A1\\u5373\\u53EF\\u3002\\u7ED3\\u679C\\u4F53\\u9A8C\\u95EE\\u9898\\u7684\\u53CD\\u9988\\u5F88\\u591A\\uFF0C\\u4E00\\u70B9\\u70B9\\u627E\\u8865\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u592A\\u8003\\u8651\\u515C\\u5E95\\uFF0C\\u591A\\u7EA7\\u7F13\\u5B58\\uFF0C\\u591A\\u5C42\\u590D\\u7528\\uFF0C\\u5BFC\\u81F4\\u6280\\u672F\\u67B6\\u6784\\u590D\\u6742\\uFF0C\\u7EF4\\u62A4\\u56F0\\u96BE\\u3002\")), mdx(\"p\", null, \"\\u5E76\\u6CA1\\u6709\\u8BF4\\u54EA\\u4E2A\\u4E0D\\u597D\\uFF0C\\u95EE\\u9898\\u7684\\u5173\\u952E\\u5C31\\u662F\\u600E\\u4E48\\u628A\\u63E1\\u8FD9\\u4E2A\\u5EA6\\u3002\\u5927\\u6D41\\u91CF\\u7684\\u4E1A\\u52A1\\uFF0C\\u515C\\u5E95\\u5FC5\\u987B\\u505A\\u8DB3\\uFF0C\\u5C0F\\u6D41\\u91CF\\u7684\\u4E1A\\u52A1\\uFF0C\\u53EF\\u80FD\\u8FD8\\u6CA1\\u6765\\u5F97\\u53CA\\u601D\\u8003\\u5C31\\u4E0B\\u7EBF\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u7F51\\u7EDC\\u95EE\\u9898\\u7684\\u515C\\u5E95\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u7528\\u6237\\u62C9\\u53D6\\u9996\\u9875\\u6570\\u636E\\uFF0C\\u7F51\\u7EDC\\u9AD8\\u5CF0\\u671F\\uFF0C\\u5BFC\\u81F4\\u8BF7\\u6C42\\u54CD\\u5E94\\u8D85\\u65F6\\u6216\\u8005\\u9519\\u8BEF\\uFF0C\\u600E\\u4E48\\u5904\\u7406\\uFF1F\\u7C7B\\u4F3C\\u8FD9\\u79CD\\u60C5\\u5F62\\u90FD\\u662F\\u4E0E\\u4E1A\\u52A1\\u65E0\\u5173\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u9700\\u8981\\u5BA2\\u6237\\u7AEF\\u989D\\u5916\\u5904\\u7406\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u670D\\u52A1\\u5668\\u6CA1\\u6709\\u505A\\u5206\\u5E03\\u5F0F\\uFF0C\\u504F\\u8FDC\\u5730\\u533A\\u3001\\u670D\\u52A1\\u5668\\u5B95\\u673A\\u6216\\u8005\\u89E3\\u6790\\u6CE2\\u52A8\\u5BFC\\u81F4\\u7F51\\u7EDC\\u5F88\\u5BB9\\u6613\\u8D85\\u65F6\\uFF0C\\u4E0D\\u53EF\\u80FD\\u4E00\\u81F4 Loading \\u4E0B\\u53BB\\uFF0C\\u4E43\\u81F3 try catch \\u5230\\uFF0C\\u5BFC\\u81F4\\u6CA1\\u6709\\u6570\\u636E\\u586B\\u5145\\uFF0C\\u754C\\u9762\\u767D\\u5C4F\\u3002\"), mdx(\"p\", null, \"\\u6709\\u4E9B\\u5F00\\u53D1\\u4ECE\\u81EA\\u8EAB\\u8FD9\\u5757\\u7684\\u5904\\u7406\\u591A\\u601D\\u8003\\u4E86\\u4E00\\u4E9B\\uFF0C\\u4F1A\\u5C06\\u9519\\u8BEF\\u663E\\u793A\\u51FA\\u6765\\uFF0C\\u4F46\\u662F\\u76F4\\u767D\\u7684\\u5C06\\u7F51\\u7EDC\\u72B6\\u6001\\u6216\\u8005\\u9519\\u8BEF\\u7801\\u5448\\u73B0\\u7ED9\\u7528\\u6237\\uFF0C401\\u3001504\\u7B49\\u7B49\\u9519\\u8BEF\\u7801\\uFF0C\\u4F46\\u662F\\u7528\\u6237\\u4ECD\\u7136\\u4E00\\u8138\\u61F5\\u3002\"), mdx(\"p\", null, \"\\u6CBB\\u672C\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u662F\\u589E\\u52A0\\u670D\\u52A1\\u80FD\\u529B\\uFF0C\\u964D\\u4F4E\\u7F51\\u7EDC\\u6CE2\\u52A8\\u7684\\u6982\\u7387\\uFF0C\\u4E0D\\u8FC7\\u8FD9\\u91CC\\u6211\\u4EEC\\u8BA8\\u8BBA\\u7684\\u66F4\\u591A\\u662F\\u7B56\\u7565\\u4E0A\\u600E\\u4E48\\u4F18\\u5316\\u8FD9\\u4E2A\\u4F53\\u9A8C:\"), mdx(\"p\", null, \"\\u4EE5\\u4E0B\\u7684\\u65B9\\u6CD5\\u4EC5\\u8BA8\\u8BBA\\u7AEF\\u4FA7\\u7F51\\u7EDC\\u7684\\u65B9\\u6848\\uFF0C\\u57FA\\u672C\\u4E0A\\u90FD\\u662F\\u5C01\\u88C5\\u5230\\u7F51\\u7EDC\\u5C42\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u81EA\\u52A8\\u91CD\\u8BD5\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6839\\u636E\\u6211\\u4EEC\\u7684\\u4E1A\\u52A1\\u5B9E\\u8DF5\\u4E2D\\uFF0C\\u5927\\u90E8\\u5206\\u90FD\\u662F\\u7F51\\u7EDC\\u9519\\u8BEF\\u95EE\\u9898\\uFF0C\\u5BFC\\u81F4\\u754C\\u9762\\u5F02\\u5E38\\u6216\\u8005\\u5D29\\u6E83\\uFF0C\\u8FD9\\u5176\\u4E2D\\u5927\\u90E8\\u5206\\u80FD\\u591F\\u4F7F\\u7528\\u4E8C\\u6B21\\u91CD\\u8BD5\\u89E3\\u51B3\\u95EE\\u9898\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u867D\\u7136\\u8FD9\\u4E2A\\u91CD\\u8BD5\\u4F4E\\u6210\\u672C\\uFF0C\\u4F46\\u662F\\u5C24\\u5176\\u9700\\u8981\\u6CE8\\u610F\\u4ED6\\u7684\\u5B9E\\u73B0\\u903B\\u8F91\\uFF0C\\u4E25\\u683C\\u6392\\u9664\\u90A3\\u4E9B\\u4E0D\\u80FD\\u91CD\\u8BD5\\u7684\\u4E1A\\u52A1\\uFF0C\\u591A\\u6B21\\u91CD\\u8BD5\\u4E00\\u5B9A\\u8981\\u63A7\\u5236\\u6B21\\u6570\\uFF0C\\u907F\\u514D\\u5FAA\\u73AF\\u91CD\\u8BD5\\u7ED9\\u81EA\\u5DF1\\u7684\\u670D\\u52A1\\u5668\\u6765\\u4E00\\u6B21 DDoS \\u653B\\u51FB\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u81EA\\u52A8\\u4FEE\\u590D\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5728\\u76F8\\u5BF9\\u5E95\\u5C42\\u7684\\u5730\\u65B9\\u5C01\\u88C5\\u4E00\\u4E9B\\u9519\\u8BEF\\u68C0\\u6D4B\\u548C\\u4FEE\\u590D\\u65B9\\u6CD5\\uFF0C\\u5BF9\\u4E8E\\u6BD4\\u5982\\u7F51\\u7EDC\\u52AB\\u6301\\u3001\\u4EE3\\u7406\\u3001\\u8BC1\\u4E66\\u95EE\\u9898\\u7B49\\uFF0C\\u63D0\\u4F9B\\u68C0\\u6D4B\\u3001\\u63D0\\u793A\\u548C\\u4FEE\\u590D\\u7684\\u80FD\\u529B\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u51FA\\u73B0\\u7F51\\u7EDC\\u52AB\\u6301\\u5C31\\u5347\\u7EA7 https\\uFF0C\\u5347\\u7EA7 https \\u4E4B\\u540E\\u51FA\\u73B0\\u8BC1\\u4E66\\u95EE\\u9898\\uFF0C\\u8BC1\\u4E66\\u6821\\u9A8C\\u8FD8\\u53EF\\u80FD\\u4F1A\\u6709\\u7F51\\u7EDC\\u95EE\\u9898\\uFF0C\\u8FD9\\u91CC\\u9762\\u5F88\\u591A\\u60F3\\u4E0D\\u5230\\u7684\\u5F02\\u5E38\\u9700\\u8981\\u6536\\u96C6\\u548C\\u89E3\\u51B3\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u8D1F\\u8F7D\\u5747\\u8861\\u548C\\u81EA\\u52A8\\u6545\\u969C\\u8F6C\\u79FB\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5206\\u5E03\\u5F0F\\u67B6\\u6784\\u3001\\u591A\\u670D\\u52A1\\u4E2D\\u5FC3\\u3001\\u5C31\\u8FD1\\u670D\\u52A1\\u7B49\\uFF0C\\u670D\\u52A1\\u7AEF\\u6709\\u5F88\\u591A\\u7684\\u7B56\\u7565\\u8BA9\\u7AEF\\u4FA7\\u7684\\u6027\\u80FD\\u6709\\u66F4\\u597D\\u7684\\u7A33\\u5B9A\\u6027\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u4F46\\u662F\\u5728\\u7AEF\\u4FA7\\u4E5F\\u53EF\\u4EE5\\u4E3B\\u52A8\\u505A\\u4E00\\u4E9B\\u4F53\\u9A8C\\u4F18\\u5316\\uFF0C\\u6BD4\\u5982\\u5B9A\\u65F6\\u5411\\u591A\\u4E2A\\u670D\\u52A1\\u4E2D\\u5FC3\\u6D4B\\u8BD5\\u7F51\\u7EDC\\u60C5\\u51B5\\uFF0C\\u6839\\u636E\\u521D\\u59CB\\u6D4B\\u91CF\\u7ED3\\u679C\\u6765\\u51B3\\u7B56\\u4E3B\\u5907\\u7F51\\u5173\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u670D\\u52A1\\u7AEF\\u7684\\u7B56\\u7565\\u66F4\\u591A\\u662F\\u9488\\u5BF9\\u5730\\u533A\\u6027\\u7684\\u6027\\u80FD\\u4F18\\u5316\\uFF0C\\u4F46\\u662F\\u5BF9\\u4E8E\\u7AEF\\u4FA7\\u6765\\u8BF4\\u5E76\\u4E0D\\u4E00\\u5B9A\\u662F\\u6700\\u4F18\\u7684\\u7F51\\u5173\\u8DF3\\u8F6C\\u3002\\u4ECE\\u7AEF\\u4FA7\\u6765\\u505A\\u65B9\\u6848\\uFF0C\\u53EF\\u4EE5\\u76F8\\u5BF9\\u4E2A\\u6027\\u5316\\u7684\\u4F18\\u5316\\u7F51\\u7EDC\\u65B9\\u6848\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u4F46\\u662F\\u7AEF\\u4FA7\\u7B56\\u7565\\u53EF\\u80FD\\u4F1A\\u65E0\\u6CD5\\u5E73\\u8861\\u8D1F\\u8F7D\\uFF0C\\u53EF\\u80FD\\u5BFC\\u81F4\\u670D\\u52A1\\u5668\\u7684\\u8D1F\\u8F7D\\u7B56\\u7565\\u88AB\\u7AEF\\u4FA7\\u88AB\\u6253\\u7834\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5907\\u7528\\u63A5\\u53E3\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5206\\u5E03\\u5F0F\\u67B6\\u6784\\u3001\\u591A\\u670D\\u52A1\\u4E2D\\u5FC3\\u3001\\u5C31\\u8FD1\\u670D\\u52A1\\u7B49\\u65B9\\u6848\\u90FD\\u5C5E\\u4E8E\\u4F20\\u7EDF\\u610F\\u4E49\\u4E0A\\u7684\\u540C\\u4E00\\u4E2A\\u63A5\\u53E3\\u7684\\u8D1F\\u8F7D\\u5747\\u8861\\uFF0C\\u4F46\\u662F\\u9664\\u6B64\\u4E4B\\u5916\\uFF0C\\u8FD8\\u6709\\u591A\\u63A5\\u53E3\\u5747\\u8861\\u7684\\u7B56\\u7565\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6BD4\\u5982\\u9996\\u9875\\u7528\\u6237\\u5217\\u8868\\u63A5\\u53E3\\uFF0C\\u5E73\\u65F6\\u662F\\u7528\\u7684\\u4E2A\\u6027\\u5316\\u6392\\u5E8F\\uFF0C\\u4F46\\u662F\\u4E1A\\u52A1\\u9AD8\\u5CF0\\u671F\\uFF0C\\u4E2A\\u6027\\u5316\\u7684\\u6027\\u80FD\\u538B\\u529B\\u592A\\u5927\\uFF0C\\u63A5\\u53E3\\u901F\\u5EA6\\u660E\\u663E\\u53D8\\u6162\\uFF0C\\u751A\\u81F3\\u63A5\\u53E3\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u90A3\\u4E48\\u5C31\\u53EF\\u4EE5\\u7A0D\\u5FAE\\u505A\\u4E00\\u4E9B\\u964D\\u7EA7\\u7B56\\u7565\\uFF0C\\u5C06\\u4E2A\\u6027\\u5316\\u6392\\u5E8F\\u7684\\u63A5\\u53E3\\u66FF\\u6362\\u4E3A\\u666E\\u901A\\u6392\\u5E8F\\u63A5\\u53E3\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u8FD9\\u79CD\\u65B9\\u6CD5\\u8FD8\\u80FD\\u5C4F\\u853D\\u540E\\u53F0\\u670D\\u52A1\\u4E2D\\u4E2A\\u6027\\u63A8\\u8350\\u90E8\\u5206\\u51FA\\u73B0\\u7684\\u903B\\u8F91\\u95EE\\u9898\\u3002\\u5F53\\u7136\\u8FD9\\u4E9B\\u524D\\u63D0\\u662F\\u4F60\\u5207\\u6362\\u5230\\u7684\\u5907\\u7528\\u63A5\\u53E3\\u7684\\u627F\\u8F7D\\u80FD\\u529B\\u5FC5\\u987B\\u80FD\\u591F hold \\u4F4F\\u8FD9\\u4E9B\\u6D41\\u91CF\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6700\\u5DEE\\u7684\\u60C5\\u51B5\\u662F\\u505A\\u4E00\\u4E2A\\u9759\\u6001\\u63A5\\u53E3\\uFF0C\\u6BCF\\u65E5\\u6216\\u8005\\u6BCF\\u65F6\\u66F4\\u65B0\\u4E00\\u4E2A\\u57FA\\u7840\\u63A5\\u53E3\\u8FD4\\u56DE\\u503C\\uFF0C\\u4E43\\u81F3\\u6700\\u5DEE\\u7684\\u624B\\u5199\\u4E00\\u4E2A\\u793A\\u4F8B\\u6570\\u636E\\uFF0C\\u5728\\u52A8\\u6001\\u5316\\u5B8C\\u5168\\u4E0D\\u53EF\\u7528\\u7684\\u65F6\\u5019\\uFF0C\\u5C06\\u6D41\\u91CF\\u90FD\\u5207\\u5230\\u7EAF\\u9759\\u6001\\u7684\\u63A5\\u53E3\\uFF0C\\u81F3\\u5C11\\u6EE1\\u8DB3\\u6682\\u65F6\\u7684\\u670D\\u52A1\\u5668\\u91CD\\u542F\\u65F6\\u95F4\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6570\\u636E\\u7F13\\u5B58\\u548C api sw\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u4E0A\\u4E00\\u6B21\\u7684\\u8BF7\\u6C42\\u7F13\\u5B58\\u5230\\u672C\\u5730\\uFF0C\\u8FD9\\u6B21\\u7F51\\u7EDC\\u8BF7\\u6C42\\u5982\\u679C\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u53EF\\u4EE5\\u5728\\u6743\\u8861\\u6570\\u636E\\u6709\\u6548\\u6027\\u4E4B\\u540E\\u663E\\u793A\\u7F13\\u5B58\\u7684\\u5185\\u5BB9\\uFF0C\\u81F3\\u5C11\\u6BD4 loading \\u8981\\u6709\\u610F\\u4E49\\u7684\\u591A\\u3002\\u4E0D\\u8FC7\\u9700\\u8981\\u4E00\\u4E9B\\u4E0D\\u592A\\u53D8\\u5316\\u7684\\u6570\\u636E\\uFF0C\\u5E76\\u4E14\\u8BBE\\u7F6E\\u8FC7\\u671F\\u65F6\\u95F4\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"web \\u7AEF\\u7684 sw \\u53EF\\u4EE5\\u4F5C\\u4E3A API \\u7684\\u4E2D\\u8F6C\\u7AD9\\uFF0C\\u6765\\u5904\\u7406\\u8BF7\\u6C42\\u7F13\\u5B58\\uFF0C\\u5E73\\u6ED1\\u5904\\u7406\\u4E00\\u4E9B\\u7F51\\u7EDC\\u4E0D\\u7A33\\u5B9A\\u7684\\u60C5\\u51B5\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6709\\u610F\\u4E49 ssr \\u548C site sw\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5BF9\\u4E8E\\u524D\\u7AEF\\uFF0C\\u7528\\u6237\\u6BCF\\u4E00\\u4E2A\\u7F51\\u7EDC\\u8BF7\\u6C42\\u90FD\\u662F\\u6709\\u4EE3\\u4EF7\\u7684\\uFF0Cssr \\u51FA\\u4E00\\u4E2A\\u9875\\u9762\\u6216\\u8005\\u5B9E\\u73B0\\u6E32\\u67D3\\u51FA\\u4E3B\\u8981\\u5185\\u5BB9\\u533A\\uFF0C\\u76F8\\u6BD4\\u7A7A\\u767D\\u9875\\u9762\\u5F88\\u591A\\u7684\\u9AA8\\u67B6 loading \\u5728\\u8BF7\\u6C42\\u591A\\u4E2A\\u63A5\\u53E3\\u586B\\u5185\\u5BB9\\u8981\\u597D\\u7684\\u591A\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u524D\\u7AEF\\u6765\\u8BF4\\u6574\\u7AD9\\u7684 sw \\u4E5F\\u662F\\u4E00\\u79CD\\u5F88\\u597D\\u7684\\u7F51\\u7EDC\\u7F13\\u5B58\\uFF0C\\u5C06\\u6574\\u4E2A\\u7AD9\\u70B9\\u901A\\u8FC7 SW \\u6765\\u5B9E\\u73B0\\u79BB\\u7EBF\\u5316\\u8BBF\\u95EE\\uFF0C\\u6EE1\\u8DB3\\u54EA\\u6015\\u89C6\\u89C9\\u4E0A\\u7684\\u4E00\\u70B9\\u7126\\u8651\\u7F13\\u89E3\\u3002\"))), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u7684\\u80FD\\u529B\\u90FD\\u9700\\u8981\\u901A\\u8FC7\\u5DE5\\u7A0B\\u5316\\u7684\\u624B\\u6BB5\\u5C01\\u88C5\\u5728\\u7F51\\u7EDC\\u5C42\\uFF0C\\u800C\\u4E14\\u5728\\u7528\\u6237\\u91CF\\u4E0D\\u5927\\u7684\\u65F6\\u5019\\u9009\\u62E9\\u6027\\u7684\\u4E0A\\u3002\"), mdx(\"p\", null, \"\\u4F7F\\u7528\\u5206\\u5E03\\u5F0F\\u7F51\\u5173\\u964D\\u4F4E\\u7F51\\u7EDC\\u8BF7\\u6C42\\u96C6\\u4E2D\\u5BFC\\u81F4\\u7684\\u7F51\\u7EDC\\u95EE\\u9898\\uFF0C\\u4E8B\\u5148\\u586B\\u5145\\u4E0A\\u6B21\\u6570\\u636E\\u7F13\\u89E3\\u7B49\\u5F85\\u60C5\\u7EEA\\uFF0C\\u7F51\\u7EDC\\u8FD4\\u56DE\\u51FA\\u73B0\\u95EE\\u9898\\u540E\\u68C0\\u6D4B\\u7F51\\u7EDC\\u72B6\\u6001\\uFF0C\\u65AD\\u7F51\\u63D0\\u793A\\uFF0C\\u672A\\u65AD\\u7F51\\u91CD\\u8BD5\\uFF0C\\u91CD\\u8BD5\\u9519\\u8BEF\\u540E\\u66F4\\u6362\\u5907\\u7528\\u63A5\\u53E3\\uFF0C\\u518D\\u5931\\u8D25\\u540E\\u63D0\\u793A\\u7F51\\u7EDC\\u95EE\\u9898\\uFF0C\\u63D0\\u4F9B\\u91CD\\u8BD5\\u6309\\u94AE\\u751A\\u81F3\\u7F51\\u7EDC\\u8BCA\\u65AD\\u5DE5\\u5177\\u3002\"), mdx(\"p\", null, \"\\u5BF9\\u4E1A\\u52A1\\u7684\\u53EF\\u7528\\u6027\\u652F\\u6301\\u6709\\u5F88\\u591A\\u624B\\u6BB5\\uFF0C\\u76EE\\u7684\\u90FD\\u662F\\u5728\\u6700\\u574F\\u7684\\u60C5\\u51B5\\u4E0B\\u8BA9\\u4E1A\\u52A1\\u6EE1\\u8DB3\\u57FA\\u672C\\u7684\\u53EF\\u7528\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u57CB\\u70B9\\u3001\\u76D1\\u6D4B\\u548C\\u544A\\u8B66\\u673A\\u5236\"), mdx(\"p\", null, \"\\u8FD9\\u90E8\\u5206\\u662F\\u5BA2\\u6237\\u7AEF\\u5BF9\\u7F51\\u7EDC\\u63A5\\u53E3\\u5C42\\u7684\\u68C0\\u6D4B\\u53CD\\u9988\\u673A\\u5236\\u3002\\u4F46\\u662F\\u5B9E\\u73B0\\u6BD4\\u8F83\\u5B8C\\u5907\\u53CA\\u65F6\\u7684\\u4E00\\u5957\\u673A\\u5236\\uFF0C\\u9700\\u8981\\u4F9D\\u9760\\u4F53\\u7CFB\\uFF0C\\u6BD4\\u5982\\u6574\\u4E2A\\u5E94\\u7528\\u7684\\u57CB\\u70B9\\u3001\\u5927\\u6570\\u636E\\u5E73\\u53F0\\u642D\\u5EFA\\u3001\\u544A\\u8B66\\u89C4\\u5219\\u548C\\u63A8\\u9001\\uFF0C\\u8FD9\\u91CC\\u4E1C\\u897F\\u642D\\u5EFA\\u8D77\\u6765\\u4E4B\\u540E\\uFF0C\\u4E00\\u4E2A\\u63A5\\u53E3\\u76D1\\u6D4B\\u81EA\\u7136\\u5C31\\u662F\\u987A\\u5E26\\u7684\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u53EF\\u7528\\u6027\\u7684\\u672C\\u8D28\"), mdx(\"p\", null, \"\\u6700\\u540E\\u60F3\\u591A\\u8BF4\\u4E00\\u4E9B\\u201C\\u53EF\\u7528\\u6027\\u201D(Availability)\\u8FD9\\u4E09\\u4E2A\\u5B57\\u7684\\u601D\\u8003\\u3002\"), mdx(\"p\", null, \"\\u901A\\u8FC7\\u5404\\u79CD\\u65B9\\u6CD5\\uFF0C\\u5C3D\\u529B\\u8BA9\\u6574\\u4E2A\\u7CFB\\u7EDF\\u6B63\\u5E38\\u8FD0\\u884C\\uFF0C\\u4E3A\\u4E86\\u4FDD\\u8BC1\\u6838\\u5FC3\\u4E1A\\u52A1\\u573A\\u666F\\u7684\\u53EF\\u7528\\uFF0C\\u5B81\\u613F\\u727A\\u7272\\u6389\\u4E00\\u4E9B\\u8FB9\\u754C\\u4E1A\\u52A1\\u3002\"), mdx(\"h3\", null, \"3.1 \\u91CD\\u89C6\\u591A\\u6B21/\\u591A\\u4E2A\\u7684\\u529B\\u91CF\"), mdx(\"p\", null, \"\\u89E3\\u51B3\\u201C\\u4E0D\\u53EF\\u7528\\u6027\\u201D\\u7684\\u6D41\\u7A0B\\uFF0C\\u68B3\\u7406\\u53EF\\u80FD\\u51FA\\u73B0\\u4E0D\\u53EF\\u7528\\u7684\\u65AD\\u70B9\\uFF0C\\u628A\\u6BCF\\u4E2A\\u4E0D\\u53EF\\u7528\\u7684\\u5730\\u65B9\\u90FD\\u8FDB\\u884C\\u591A\\u5C42\\u4F18\\u5316\\u3002\"), mdx(\"p\", null, \"\\u5047\\u8BBE\\u4E00\\u4E2A\\u754C\\u9762\\uFF0C\\u53EF\\u7528\\u6027\\u53D6\\u51B3\\u4E8E\\uFF1A\\u201C\\u670D\\u52A1\\u63A5\\u53E3\\u201D\\u3001\\u201C\\u7F51\\u5173\\u201D\\u3001\\u201C\\u7269\\u7406\\u94FE\\u8DEF\\u201D\\u3001\\u201C\\u7F51\\u7EDC\\u6CE2\\u52A8\\u201D\\u3001\\u201C\\u672C\\u673A\\u63A5\\u6536\\u201D\\u51E0\\u4E2A\\u73AF\\u8282\\uFF0C\\u6BCF\\u4E2A\\u73AF\\u8282\\u90FD\\u6709\\u6781\\u7AEF\\u7684 10% \\u9519\\u8BEF\\u7387\\uFF0C\\u90A3\\u4E48\\u5982\\u679C\\u4E0D\\u505A\\u4F18\\u5316\\u7684\\u60C5\\u51B5\\uFF0C\\u53EF\\u7528\\u6027\\u6700\\u7EC8\\u53EA\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"90%*90%*90%*90%*90% = 66.2%\"), \" \\u7684\\u5927\\u5C0F\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5176\\u4E2D\\u6BCF\\u4E2A\\u73AF\\u8282\\u90FD\\u53EA\\u63D0\\u4F9B\\u4E00\\u4E2A\\u5907\\u7528\\u65B9\\u6848\\uFF0C\\u90A3\\u4E48\\u6BCF\\u4E2A\\u73AF\\u8282\\u7684\\u9519\\u8BEF\\u7387\\u80FD\\u964D\\u4F4E\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"10%*10% = 1%\"), \" \\uFF0C\\u90A3\\u4E48\\u6574\\u4E2A\\u73AF\\u8282\\u7684\\u53EF\\u7528\\u7387\\u80FD\\u5F88\\u8F7B\\u677E\\u7684\\u63D0\\u9AD8\\u5230\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"99%*99%*99%*99%*99% = 95%\"), \" \\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u6BCF\\u4E2A\\u8584\\u5F31\\u7684\\u73AF\\u8282\\uFF0C\\u515C\\u5E95\\u4E00\\u5C42\\u5C31\\u80FD\\u5C06\\u6574\\u4E2A\\u4E1A\\u52A1\\u7684\\u53EF\\u7528\\u6027\\u63D0\\u9AD8\\u5230\\u975E\\u5E38\\u597D\\u7684\\u7A0B\\u5EA6\\uFF0C\\u5F88\\u5212\\u7B97\\u3002\"), mdx(\"h3\", null, \"3.2 \\u81EA\\u52A8\\u8BCA\\u65AD\\u548C\\u81EA\\u52A8\\u6392\\u6545\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u7684\\u518D\\u8BD5\\u4E00\\u6B21\\u6216\\u8005\\u5907\\u7528\\u65B9\\u6848\\uFF0C\\u8BF4\\u5230\\u5E95\\u90FD\\u662F\\u7EDF\\u8BA1\\u610F\\u4E49\\u4E0A\\u7684\\u4F18\\u5316\\u53EF\\u7528\\u6027\\uFF0C\\u9519\\u8BEF\\u5C31\\u662F\\u9519\\u8BEF\\uFF0C\\u4E0D\\u80FD\\u56E0\\u4E3A\\u518D\\u8BD5\\u4E00\\u6B21\\u6210\\u529F\\u4E86\\u5C31\\u4E0D\\u662F\\u9519\\u8BEF\\u4E86\\u3002\\u4ECD\\u7136\\u662F\\u95EE\\u9898\\uFF0C\\u53EF\\u80FD\\u662F\\u8BA4\\u4E3A\\u4E0D\\u53EF\\u63A7\\u7684\\u95EE\\u9898\\uFF0C\\u53EF\\u80FD\\u662F\\u65B9\\u6848\\u8003\\u8651\\u4E0D\\u5468\\uFF0C\\u751A\\u81F3\\u53EF\\u80FD\\u662F\\u8F6F\\u4EF6 BUG\\uFF0C\\u8FD9\\u90FD\\u662F\\u9700\\u8981\\u89E3\\u51B3\\u548C\\u5904\\u7406\\u6389\\u7684\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5C06\\u9519\\u8BEF\\u884C\\u4E3A\\u81EA\\u52A8\\u8BCA\\u65AD\\u51FA\\u6765\\uFF0C\\u9488\\u5BF9\\u4E0D\\u540C\\u7684\\u8BCA\\u65AD\\u65BD\\u884C\\u4E0D\\u540C\\u7684\\u515C\\u5E95\\u65B9\\u6848\\u6765\\u6392\\u6545\\u624D\\u662F\\u7CBE\\u51C6\\u624B\\u672F\\u3002\"), mdx(\"p\", null, \"\\u6700\\u7B80\\u5355\\u7684\\u201C\\u9EA6\\u514B\\u98CE\\u5F55\\u5236\\u201D\\u53EF\\u80FD\\u51FA\\u73B0\\u7684\\u95EE\\u9898\\u6709\\uFF1A\\u6CA1\\u6709\\u8BBE\\u5907\\u3001\\u6CA1\\u6709\\u6743\\u9650\\u3001\\u6CA1\\u7ED9\\u6743\\u9650\\u3001\\u8BBE\\u5907\\u88AB\\u5360\\u7528\\u3001\\u8BBE\\u5907\\u65E0\\u6CD5\\u8BFB\\u53D6\\u3001\\u5B89\\u5168\\u9519\\u8BEF\\u3001\\u65E0\\u6CD5\\u7F16\\u7801\\u3001\\u5B58\\u50A8\\u65E0\\u6743\\u9650\\u3001\\u5B58\\u50A8\\u88AB\\u5360\\u7528\\u3001\\u5B58\\u50A8\\u5B89\\u5168\\u95EE\\u9898\\u3001\\u5B58\\u50A8\\u65E0\\u6CD5\\u5199\\u5165\\u7B49\\u7B49\\uFF0C\\u91CC\\u9762\\u5F88\\u591A\\u4E8B\\u65E0\\u6CD5\\u89E3\\u51B3\\u7684\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u9700\\u8981\\u6839\\u7EDD\\u8FD9\\u4E9B\\u4E0D\\u540C\\u7684\\u9519\\u8BEF\\u91C7\\u53D6\\u4E0D\\u540C\\u7684\\u7B56\\u7565\\u6765\\u91CD\\u8BD5\\uFF0C\\u81EA\\u52A8\\u6392\\u9664\\u8FD9\\u4E9B\\u6545\\u969C\\u3002\"), mdx(\"h3\", null, \"3.3 \\u4E3B\\u52A8\\u964D\\u7EA7\"), mdx(\"p\", null, \"\\u4E3A\\u4E86\\u5B8C\\u7F8E\\u7684\\u4E1A\\u52A1\\u4F53\\u9A8C\\uFF0C\\u5F88\\u591A\\u7684\\u573A\\u666F\\u90FD\\u662F\\u6709\\u8981\\u6C42\\u7684\\uFF0C\\u6BD4\\u5982\\u4E2A\\u6027\\u5316\\u63A8\\u8350\\u7684\\u5343\\u4EBA\\u5343\\u9762\\uFF0C\\u6BD4\\u5982\\u5B9E\\u65F6\\u7ED3\\u7B97\\u548C\\u6263\\u6B3E\\uFF0C\\u6BD4\\u5982\\u804A\\u5929\\u6D88\\u606F\\u7684\\u5B9E\\u65F6\\u63A8\\u9001\\uFF0C\\u6BD4\\u5982\\u89C6\\u9891\\u7684\\u9AD8\\u6E05\\u7B49\\u7B49\\u4E1A\\u52A1\\uFF0C\\u4ED6\\u4EEC\\u90FD\\u5E76\\u4E0D\\u662F\\u6CA1\\u6709\\u4EE3\\u4EF7\\u7684\\uFF0C\\u6548\\u679C\\u597D\\u574F\\u90FD\\u53D6\\u51B3\\u4E8E\\u76F8\\u5E94\\u7684\\u8BA1\\u7B97\\u8D44\\u6E90\\u548C\\u65F6\\u95F4\\u3002\"), mdx(\"p\", null, \"\\u5728\\u4E1A\\u52A1\\u9AD8\\u5CF0\\u671F\\uFF0C\\u6211\\u4EEC\\u7684\\u670D\\u52A1\\u8D44\\u6E90\\u662F\\u5F88\\u6709\\u9650\\u7684\\uFF0C\\u53EF\\u7528\\u6027\\u8981\\u8FDC\\u6BD4\\u8FD9\\u4E9B\\u201C\\u66F4\\u597D\\u7684\\u4F53\\u9A8C\\u201D\\u91CD\\u8981\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u6211\\u4EEC\\u9700\\u8981\\u4E3B\\u52A8\\u5BF9\\u4E1A\\u52A1\\u964D\\u7EA7\\uFF0C\\u5C06\\u597D\\u7684\\u66FF\\u6210\\u76F8\\u5BF9\\u6CA1\\u90A3\\u4E48\\u597D\\u7684\\uFF0C\\u8282\\u7701\\u8D44\\u6E90\\u6765\\u62C9\\u9AD8\\u53EF\\u7528\\u6027\\u3002\\u6BD4\\u5982\\u63A8\\u8350\\u6CA1\\u90A3\\u4E48\\u5173\\u8054\\u7684\\u5546\\u54C1\\u3001\\u6BD4\\u5982\\u7A0D\\u5FAE\\u5F02\\u6B65\\u6392\\u961F\\u7684\\u7ED3\\u7B97\\u548C\\u63A8\\u9001\\u3001\\u6BD4\\u5982\\u76F8\\u5BF9\\u4F4E\\u6E05\\u6670\\u5EA6\\u7684\\u89C6\\u9891\\u8D44\\u6E90\\u3002\"), mdx(\"p\", null, \"\\u751A\\u81F3\\u8FD8\\u53EF\\u4EE5\\u5BF9\\u90E8\\u5206\\u76EE\\u6807\\u7528\\u6237\\u6216\\u8005\\u975E\\u6838\\u5FC3\\u8BF7\\u6C42\\u8FDB\\u884C\\u9650\\u6D41\\uFF0C\\u751A\\u81F3\\u6839\\u636E\\u53EF\\u7528\\u6027\\u72B6\\u6001\\uFF0C\\u4E3B\\u52A8\\u5BF9\\u8FB9\\u7F18\\u4E1A\\u52A1\\u7194\\u65AD\\u7B49\\u7B56\\u7565\\uFF0C\\u653E\\u5F03\\u4E00\\u90E8\\u5206\\u4E1A\\u52A1\\uFF0C\\u6765\\u4FDD\\u5168\\u53EF\\u7528\\u6027\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u51FA\\u53D1\\u70B9\"), mdx(\"p\", null, \"\\u8FD9\\u7BC7\\u6587\\u7AE0\\u7684\\u51FA\\u53D1\\u70B9\\uFF0C\\u662F\\u5728\\u7AEF\\u4FA7\\u642D\\u5EFA\\u4E00\\u5957\\u7F51\\u7EDC\\u5C42\\u7684\\u65F6\\u5019\\uFF0C\\u7ED3\\u5408\\u5B9E\\u9645\\u6D41\\u91CF\\u5BF9\\u4E1A\\u52A1\\u53EF\\u7528\\u6027\\u7684\\u601D\\u8003\\u3002\"), mdx(\"p\", null, \"\\u6839\\u636E\\u8FD9\\u4E9B\\u60F3\\u6CD5\\uFF0C\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"req\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"res\"), \" \\u4E4B\\u95F4\\u642D\\u5EFA\\u975E\\u5E38\\u597D\\u73A9\\u7684\\u5F02\\u5E38\\u4F18\\u5316\\u7B56\\u7565\\uFF0C\\u628A\\u53EF\\u7528\\u6027\\u505A\\u4E0A\\u6765\\uFF0C\\u8FC7\\u7A0B\\u5F88\\u6709\\u610F\\u601D\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}